#72 by GitHub stars
alchaincyf/huashu-design
花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。
History
Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.
View weekly changes
SKILL.md
Week of Nov 2, 2026 · +4 / −3 lines
Before Network or broad shell → After Network or broad shell
4fc7bfdbd5ec → 9b01ee875167
- 8 version: "3.0.0"
+ 8 version: "3.1.0"
+ 73 | 小红书图文、封面、轮播 | `references/modules/xiaohongshu.md` |
- 113 - 初稿形态：六格缩略图 1 页（备选），外加网页 / 信息图 / 原型每方向 1 个完整 HTML＋截图；deck 每方向 2 页代表页；动画每方向 1 张方向板（真实渲出的关键帧＋色板＋一句定位＋参照名）；封面 / 单图每方向 1 张真实出图
+ 114 - 初稿形态：六格缩略图 1 页（备选），外加网页 / 信息图 / 原型每方向 1 个完整 HTML＋截图；deck 每方向 2 页代表页；动画每方向 1 张方向板（真实渲出的关键帧＋色板＋一句定位＋参照名）；封面 / 单图每方向 1 张真实出图；小红书多张图文每方向封面＋1 张内页
- 153 | 风格库（网页 / PPT / 信息图 / App / 中文与东亚，每种都有样张图）、色彩推导协议 | `references/design-styles.md`＋`assets/style-specimens/sheet-*.jpg` 总览 |
+ 154 | 风格库（网页 / PPT / 信息图 / App / 中文与东亚 / 小红书，每种都有样张图）、色彩推导协议 | `references/design-styles.md`＋`assets/style-specimens/sheet-*.jpg` 总览 |
Week of Oct 26, 2026 · Line counts unavailable
Before Not checked yet → After Network or broad shell
First observation → 4fc7bfdbd5ec
No earlier version was observed for comparison.
28.9kGitHub stars
588stars in 7 days
1skill in this repository
19commits in 30 days
Heat
7.8- Star growth, last 7 daysAhead of 91% of tracked repositories
- Star growth, last 24 hoursAhead of 91% of tracked repositories
- Rank movement, last 7 daysAhead of 89% of tracked repositories
- Commits, last 30 daysAhead of 83% of tracked repositories
- Accounts asking about it through MCP, last 7 daysNot available
- Hot votes this weekAhead of 0% of tracked repositories
Heat never changes the order by stars, and sponsorship never touches it. How heat works
Stars over time
Individual skills in this repository
How it works
huashu-design
When your agent uses it
花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。
What it loads into context
Frontmatter
177 tokensAlways available to the agent
SKILL.md
4,396 tokensWhen the skill is activated
Reference documents
246,747 tokensLoaded on request
Token counts are estimates. Scripts run separately; they are not counted as reference context.
The playbook
- 你是谁
- 适用范围
- 开工三件事（每个设计任务都做，几秒钟）
- 路由：先定模块，再读模块手册
- 窄桥（所有模块共用，照字面做）
- 开阔地（参考，不是配额）
- 收工三件事
- 弱 runtime 与跨 agent
- 产出要求
- 关于作者
- 版本检查
Scripts executed separately
assets/android_frame.jsxassets/animations.jsxassets/browser_window.jsxassets/cursor.jsxassets/deck_stage.jsassets/design_canvas.jsxassets/ios_frame.jsxassets/macos_window.jsxassets/narration_stage.jsxassets/style-specimens/xhs/_kit/birds.jsassets/style-specimens/xhs/_kit/xhs.jspackage.jsonscripts/add-music.shscripts/build_specimens.pyscripts/capabilities.pyscripts/cloud/ai-review-video.pyscripts/cloud/tts-doubao.mjsscripts/convert-formats.shscripts/design-gate-hook.shscripts/design_lint.pyscripts/export_deck_pdf.mjsscripts/export_deck_pptx.mjsscripts/export_deck_stage_pdf.mjsscripts/fetch_images.pyscripts/gen_deck_thumbs.mjsscripts/html2pptx.jsscripts/learn.pyscripts/mix-voiceover.shscripts/narrate-pipeline.mjsscripts/pptx_from_rendered.pyscripts/ref_board.pyscripts/render-narration.shscripts/render-video-seek.jsscripts/render-video.jsscripts/sfx-cues.shscripts/tests/test_compare_failures.pyscripts/tests/test_design_lint.pyscripts/tests/test_pptx_from_rendered.pyscripts/tests/test_xhs_render.pyscripts/verify-video.shscripts/verify.pyscripts/xhs_render.py
Files
.env.exampleasset463 bytes.gitignoreasset844 bytesLICENSEasset1,086 bytesREADME.en.mddoc29,948 bytesREADME.mddoc30,113 bytesSECURITY.mddoc7,396 bytesSKILL.mdcore15,699 bytesSKILL.mdcore15,699 bytesSKILL.mdcore15,699 bytesSKILL.mdcore15,699 bytesSKILL.mdcore15,699 bytesSKILL.mdcore15,699 bytesSKILL.mdcore15,699 bytesassets/android_frame.jsxruns4,506 bytesassets/animations.jsxruns10,528 bytesassets/banner.svgasset9,502 bytesassets/bgm-ad.mp3asset4,950,071 bytesassets/bgm-educational-alt.mp3asset4,468,765 bytesassets/bgm-educational.mp3asset4,047,162 bytesassets/bgm-tech.mp3asset4,818,429 bytesassets/bgm-tutorial-alt.mp3asset3,937,926 bytesassets/bgm-tutorial.mp3asset5,542,744 bytesassets/browser_window.jsxruns3,975 bytesassets/cursor.jsxruns14,408 bytesassets/deck_index.htmlasset21,320 bytesassets/deck_stage.jsruns11,678 bytesassets/design_canvas.jsxruns5,195 bytesassets/director-notes-samples/launch-film-30s-sample.mddoc80,207 bytesassets/ios_frame.jsxruns4,753 bytesassets/macos_window.jsxruns2,536 bytesassets/narration_stage.jsxruns20,715 bytesassets/personal-asset-index.example.jsonasset1,826 bytesassets/sfx/container/card-flip.mp3asset12,164 bytesassets/sfx/container/card-snap.mp3asset8,821 bytesassets/sfx/container/modal-open.mp3asset10,493 bytesassets/sfx/container/stack-collapse.mp3asset13,836 bytesassets/sfx/feedback/achievement.mp3asset24,703 bytesassets/sfx/feedback/error-tone.mp3asset12,164 bytesassets/sfx/feedback/notification-pop.mp3asset10,493 bytesassets/sfx/feedback/success-chime.mp3asset17,180 bytesassets/sfx/impact/brand-stamp.mp3asset17,180 bytesassets/sfx/impact/drop-thud.mp3asset12,164 bytesassets/sfx/impact/logo-reveal-v2.mp3asset24,703 bytesassets/sfx/impact/logo-reveal.mp3asset24,703 bytesassets/sfx/keyboard/delete-key.mp3asset8,821 bytesassets/sfx/keyboard/enter.mp3asset8,821 bytesassets/sfx/keyboard/space-tap.mp3asset8,821 bytesassets/sfx/keyboard/type-fast.mp3asset24,703 bytesassets/sfx/keyboard/type.mp3asset13,836 bytesassets/sfx/magic/ai-process.mp3asset20,106 bytesassets/sfx/magic/sparkle.mp3asset13,836 bytesassets/sfx/magic/transform.mp3asset17,180 bytesassets/sfx/progress/complete-done.mp3asset13,836 bytesassets/sfx/progress/generate-start.mp3asset13,836 bytesassets/sfx/progress/loading-tick.mp3asset8,821 bytesassets/sfx/terminal/command-execute.mp3asset8,821 bytesassets/sfx/terminal/cursor-blink.mp3asset8,821 bytesassets/sfx/terminal/output-appear.mp3asset10,493 bytesassets/sfx/transition/dissolve.mp3asset13,836 bytesassets/sfx/transition/slide-in.mp3asset10,493 bytesassets/sfx/transition/swipe-horizontal.mp3asset12,164 bytesassets/sfx/transition/whoosh-fast.mp3asset8,821 bytesassets/sfx/transition/whoosh.mp3asset10,493 bytesassets/sfx/ui/click-soft.mp3asset8,821 bytesassets/sfx/ui/click.mp3asset8,821 bytesassets/sfx/ui/focus.mp3asset8,821 bytesassets/sfx/ui/hover-subtle.mp3asset8,821 bytesassets/sfx/ui/tap-finger.mp3asset8,821 bytesassets/sfx/ui/toggle-on.mp3asset8,821 bytesassets/showcases/INDEX.mddoc5,538 bytesassets/showcases/cover/cover-build.htmlasset5,664 bytesassets/showcases/cover/cover-build.pngasset116,336 bytesassets/showcases/cover/cover-pentagram.htmlasset4,914 bytesassets/showcases/cover/cover-pentagram.pngasset36,047 bytesassets/showcases/cover/cover-takram.htmlasset11,823 bytesassets/showcases/cover/cover-takram.pngasset155,362 bytesassets/showcases/infographic/infographic-build.htmlasset11,696 bytesassets/showcases/infographic/infographic-build.pngasset108,710 bytesassets/showcases/infographic/infographic-pentagram.htmlasset13,911 bytesassets/showcases/infographic/infographic-pentagram.pngasset159,021 bytesassets/showcases/infographic/infographic-takram.htmlasset22,396 bytesassets/showcases/infographic/infographic-takram.pngasset162,976 bytesassets/showcases/ppt/ppt-build.htmlasset9,083 bytesassets/showcases/ppt/ppt-build.pngasset84,423 bytesassets/showcases/ppt/ppt-pentagram.htmlasset11,955 bytesassets/showcases/ppt/ppt-pentagram.pngasset101,335 bytesassets/showcases/ppt/ppt-takram.htmlasset15,656 bytesassets/showcases/ppt/ppt-takram.pngasset467,187 bytesassets/showcases/website-ai-nav/ainav-build.htmlasset9,621 bytesassets/showcases/website-ai-nav/ainav-build.pngasset85,064 bytesassets/showcases/website-ai-nav/ainav-pentagram.htmlasset10,553 bytesassets/showcases/website-ai-nav/ainav-pentagram.pngasset105,575 bytesassets/showcases/website-ai-nav/ainav-takram.htmlasset12,747 bytesassets/showcases/website-ai-nav/ainav-takram.pngasset121,675 bytesassets/showcases/website-ai-writing/aiwriting-build.htmlasset14,066 bytesassets/showcases/website-ai-writing/aiwriting-build.pngasset130,604 bytesassets/showcases/website-ai-writing/aiwriting-pentagram.htmlasset14,226 bytesassets/showcases/website-ai-writing/aiwriting-pentagram.pngasset150,195 bytesassets/showcases/website-ai-writing/aiwriting-takram.htmlasset18,003 bytesassets/showcases/website-ai-writing/aiwriting-takram.pngasset157,158 bytesassets/showcases/website-devdocs/devdocs-build.htmlasset9,928 bytesassets/showcases/website-devdocs/devdocs-build.pngasset68,230 bytesassets/showcases/website-devdocs/devdocs-pentagram.htmlasset12,801 bytesassets/showcases/website-devdocs/devdocs-pentagram.pngasset117,051 bytesassets/showcases/website-devdocs/devdocs-takram.htmlasset13,106 bytesassets/showcases/website-devdocs/devdocs-takram.pngasset111,854 bytesassets/showcases/website-homepage/homepage-build.htmlasset8,314 bytesassets/showcases/website-homepage/homepage-build.pngasset61,708 bytesassets/showcases/website-homepage/homepage-pentagram.htmlasset8,491 bytesassets/showcases/website-homepage/homepage-pentagram.pngasset57,093 bytesassets/showcases/website-homepage/homepage-takram.htmlasset10,543 bytesassets/showcases/website-homepage/homepage-takram.pngasset127,610 bytesassets/showcases/website-saas/saas-build.htmlasset12,901 bytesassets/showcases/website-saas/saas-build.pngasset99,745 bytesassets/showcases/website-saas/saas-pentagram.htmlasset15,050 bytesassets/showcases/website-saas/saas-pentagram.pngasset96,559 bytesassets/showcases/website-saas/saas-takram.htmlasset18,209 bytesassets/showcases/website-saas/saas-takram.pngasset123,532 bytesassets/style-specimens/app/01-hardware-panel.htmlasset7,283 bytesassets/style-specimens/app/01-hardware-panel.jpgasset75,421 bytesassets/style-specimens/app/02-liquid-glass.htmlasset6,962 bytesassets/style-specimens/app/02-liquid-glass.jpgasset90,008 bytesassets/style-specimens/app/03-playful-3d.htmlasset5,753 bytesassets/style-specimens/app/03-playful-3d.jpgasset94,978 bytesassets/style-specimens/app/04-friendly-fintech.htmlasset6,381 bytesassets/style-specimens/app/04-friendly-fintech.jpgasset93,529 bytesassets/style-specimens/app/05-pro-camera.htmlasset7,254 bytesassets/style-specimens/app/05-pro-camera.jpgasset76,334 bytesassets/style-specimens/app/06-topo-outdoor.htmlasset9,151 bytesassets/style-specimens/app/06-topo-outdoor.jpgasset92,581 bytesassets/style-specimens/app/07-feed-waterfall.htmlasset7,716 bytesassets/style-specimens/app/07-feed-waterfall.jpgasset83,495 bytesassets/style-specimens/app/08-command-palette.htmlasset6,505 bytesassets/style-specimens/app/08-command-palette.jpgasset56,758 bytesassets/style-specimens/app/09-health-color-code.htmlasset7,485 bytesassets/style-specimens/app/09-health-color-code.jpgasset75,935 bytesassets/style-specimens/app/10-native-polish.htmlasset6,513 bytesassets/style-specimens/app/10-native-polish.jpgasset76,319 bytesassets/style-specimens/app/11-gentle-encouraging.htmlasset6,438 bytesassets/style-specimens/app/11-gentle-encouraging.jpgasset81,985 bytesassets/style-specimens/app/12-editorial-reader.htmlasset6,078 bytesassets/style-specimens/app/12-editorial-reader.jpgasset116,882 bytesassets/style-specimens/east/01-lu-jingren-bookcraft.htmlasset4,128 bytesassets/style-specimens/east/01-lu-jingren-bookcraft.jpgasset70,152 bytesassets/style-specimens/east/02-song-block-print.htmlasset4,835 bytesassets/style-specimens/east/02-song-block-print.jpgasset149,839 bytesassets/style-specimens/east/03-republic-book-jacket.htmlasset4,717 bytesassets/style-specimens/east/03-republic-book-jacket.jpgasset59,094 bytesassets/style-specimens/east/04-shanghai-deco-calendar.htmlasset5,104 bytesassets/style-specimens/east/04-shanghai-deco-calendar.jpgasset78,134 bytesassets/style-specimens/east/05-hanzi-experimental-poster.htmlasset5,087 bytesassets/style-specimens/east/05-hanzi-experimental-poster.jpgasset55,436 bytesassets/style-specimens/east/06-hk-street-signs.htmlasset4,496 bytesassets/style-specimens/east/06-hk-street-signs.jpgasset118,281 bytesassets/style-specimens/east/07-traditional-colors-solar-terms.htmlasset6,097 bytesassets/style-specimens/east/07-traditional-colors-solar-terms.jpgasset81,663 bytesassets/style-specimens/east/08-sugiura-info-mandala.htmlasset28,521 bytesassets/style-specimens/east/08-sugiura-info-mandala.jpgasset130,342 bytesassets/style-specimens/east/09-tanaka-geometric-poster.htmlasset3,179 bytesassets/style-specimens/east/09-tanaka-geometric-poster.jpgasset54,851 bytesassets/style-specimens/east/10-hattori-playful-offset.htmlasset2,990 bytesassets/style-specimens/east/10-hattori-playful-offset.jpgasset91,746 bytesassets/style-specimens/east/11-sato-minimal-symbol.htmlasset2,827 bytesassets/style-specimens/east/11-sato-minimal-symbol.jpgasset46,514 bytesassets/style-specimens/east/12-japan-magazine-dense.htmlasset14,513 bytesassets/style-specimens/east/12-japan-magazine-dense.jpgasset125,558 bytesassets/style-specimens/info/01-personal-annual-report.htmlasset9,510 bytesassets/style-specimens/info/01-personal-annual-report.jpgasset124,360 bytesassets/style-specimens/info/02-explanation-graphics.htmlasset5,055 bytesassets/style-specimens/info/02-explanation-graphics.jpgasset112,423 bytesassets/style-specimens/info/03-cross-section-epic.htmlasset7,255 bytesassets/style-specimens/info/03-cross-section-epic.jpgasset153,950 bytesassets/style-specimens/info/04-magazine-pop-data.htmlasset3,682 bytesassets/style-specimens/info/04-magazine-pop-data.jpgasset86,801 bytesassets/style-specimens/info/05-isotype.htmlasset4,001 bytesassets/style-specimens/info/05-isotype.jpgasset123,494 bytesassets/style-specimens/info/06-data-humanism.htmlasset6,064 bytesassets/style-specimens/info/06-data-humanism.jpgasset87,739 bytesassets/style-specimens/info/07-scrollytelling.htmlasset5,031 bytesassets/style-specimens/info/07-scrollytelling.jpgasset71,448 bytesassets/style-specimens/info/08-cartographic-lead.htmlasset4,747 bytesassets/style-specimens/info/08-cartographic-lead.jpgasset85,839 bytesassets/style-specimens/info/09-newsroom-chart.htmlasset5,185 bytesassets/style-specimens/info/09-newsroom-chart.jpgasset65,398 bytesassets/style-specimens/info/10-computational-portrait.htmlasset4,471 bytesassets/style-specimens/info/10-computational-portrait.jpgasset150,930 bytesassets/style-specimens/info/11-beautiful-information.htmlasset4,309 bytesassets/style-specimens/info/11-beautiful-information.jpgasset94,419 bytesassets/style-specimens/info/12-open-research-data.htmlasset3,497 bytesassets/style-specimens/info/12-open-research-data.jpgasset86,806 bytesassets/style-specimens/info/13-speculative-tech-diagram.htmlasset4,103 bytesassets/style-specimens/info/13-speculative-tech-diagram.jpgasset50,160 bytesassets/style-specimens/info/14-pictogram-system.htmlasset4,402 bytesassets/style-specimens/info/14-pictogram-system.jpgasset81,737 bytesassets/style-specimens/info/15-small-multiples.htmlasset3,028 bytesassets/style-specimens/info/15-small-multiples.jpgasset70,229 bytesassets/style-specimens/info/16-topological-transit-map.htmlasset3,662 bytesassets/style-specimens/info/16-topological-transit-map.jpgasset64,615 bytesassets/style-specimens/info/17-ma-emptiness.htmlasset2,035 bytesassets/style-specimens/info/17-ma-emptiness.jpgasset21,024 bytesassets/style-specimens/info/18-bookcraft-data.htmlasset3,087 bytesassets/style-specimens/info/18-bookcraft-data.jpgasset99,155 bytesassets/style-specimens/info/19-scientific-figure-plate.htmlasset5,291 bytesassets/style-specimens/info/19-scientific-figure-plate.jpgasset82,562 bytesassets/style-specimens/info/20-swiss-grid-report.htmlasset3,271 bytesassets/style-specimens/info/20-swiss-grid-report.jpgasset70,845 bytesassets/style-specimens/ppt/01-neo-swiss-billboard.htmlasset2,642 bytesassets/style-specimens/ppt/01-neo-swiss-billboard.jpgasset69,373 bytesassets/style-specimens/ppt/02-black-big-number-stage.htmlasset1,297 bytesassets/style-specimens/ppt/02-black-big-number-stage.jpgasset29,916 bytesassets/style-specimens/ppt/03-mono-brand-type-hero.htmlasset1,633 bytesassets/style-specimens/ppt/03-mono-brand-type-hero.jpgasset51,475 bytesassets/style-specimens/ppt/04-full-bleed-gradient-manifesto.htmlasset1,488 bytesassets/style-specimens/ppt/04-full-bleed-gradient-manifesto.jpgasset77,190 bytesassets/style-specimens/ppt/05-candy-lecture-stage.htmlasset1,573 bytesassets/style-specimens/ppt/05-candy-lecture-stage.jpgasset35,181 bytesassets/style-specimens/ppt/06-playful-collins-editorial.htmlasset2,455 bytesassets/style-specimens/ppt/06-playful-collins-editorial.jpgasset83,057 bytesassets/style-specimens/ppt/07-irreverent-pop.htmlasset2,877 bytesassets/style-specimens/ppt/07-irreverent-pop.jpgasset87,248 bytesassets/style-specimens/ppt/08-y2k-inflated-wrapped.htmlasset2,434 bytesassets/style-specimens/ppt/08-y2k-inflated-wrapped.jpgasset76,749 bytesassets/style-specimens/ppt/09-bento-grid.htmlasset4,237 bytesassets/style-specimens/ppt/09-bento-grid.jpgasset69,785 bytesassets/style-specimens/ppt/10-dark-hairline-terminal.htmlasset2,790 bytesassets/style-specimens/ppt/10-dark-hairline-terminal.jpgasset56,116 bytesassets/style-specimens/ppt/11-two-font-consulting.htmlasset3,821 bytesassets/style-specimens/ppt/11-two-font-consulting.jpgasset94,912 bytesassets/style-specimens/ppt/12-diagram-isotype.htmlasset5,300 bytesassets/style-specimens/ppt/12-diagram-isotype.jpgasset96,851 bytesassets/style-specimens/ppt/13-diagrammatic-minimalism.htmlasset3,054 bytesassets/style-specimens/ppt/13-diagrammatic-minimalism.jpgasset77,262 bytesassets/style-specimens/ppt/14-narrative-sparkline.htmlasset3,755 bytesassets/style-specimens/ppt/14-narrative-sparkline.jpgasset67,301 bytesassets/style-specimens/ppt/15-assertion-evidence.htmlasset3,295 bytesassets/style-specimens/ppt/15-assertion-evidence.jpgasset61,037 bytesassets/style-specimens/ppt/16-institutional-swiss.htmlasset2,651 bytesassets/style-specimens/ppt/16-institutional-swiss.jpgasset76,585 bytesassets/style-specimens/ppt/17-editorial-longform.htmlasset3,985 bytesassets/style-specimens/ppt/17-editorial-longform.jpgasset107,466 bytesassets/style-specimens/ppt/18-humanist-rounded-cards.htmlasset4,190 bytesassets/style-specimens/ppt/18-humanist-rounded-cards.jpgasset84,719 bytesassets/style-specimens/ppt/19-dense-research-report.htmlasset5,263 bytesassets/style-specimens/ppt/19-dense-research-report.jpgasset94,418 bytesassets/style-specimens/ppt/20-all-text-manifesto.htmlasset1,612 bytesassets/style-specimens/ppt/20-all-text-manifesto.jpgasset67,491 bytesassets/style-specimens/sheet-app.jpgasset148,578 bytesassets/style-specimens/sheet-east.jpgasset159,571 bytesassets/style-specimens/sheet-info.jpgasset236,666 bytesassets/style-specimens/sheet-ppt.jpgasset235,020 bytesassets/style-specimens/sheet-web.jpgasset240,289 bytesassets/style-specimens/sheet-xhs.jpgasset110,570 bytesassets/style-specimens/web/01-editorial-brutalism.htmlasset4,348 bytesassets/style-specimens/web/01-editorial-brutalism.jpgasset106,477 bytesassets/style-specimens/web/02-neo-brutalism.htmlasset4,334 bytesassets/style-specimens/web/02-neo-brutalism.jpgasset116,438 bytesassets/style-specimens/web/03-memphis-maximalism.htmlasset4,868 bytesassets/style-specimens/web/03-memphis-maximalism.jpgasset170,654 bytesassets/style-specimens/web/04-friendly-candy.htmlasset4,946 bytesassets/style-specimens/web/04-friendly-candy.jpgasset65,788 bytesassets/style-specimens/web/05-pure-css-art.htmlasset5,501 bytesassets/style-specimens/web/05-pure-css-art.jpgasset74,833 bytesassets/style-specimens/web/06-bold-big-type.htmlasset2,594 bytesassets/style-specimens/web/06-bold-big-type.jpgasset68,854 bytesassets/style-specimens/web/07-cosmic-retro-futurism.htmlasset4,124 bytesassets/style-specimens/web/07-cosmic-retro-futurism.jpgasset85,819 bytesassets/style-specimens/web/08-cinematic-sound-viz.htmlasset12,474 bytesassets/style-specimens/web/08-cinematic-sound-viz.jpgasset89,936 bytesassets/style-specimens/web/09-pixel-side-scroller.htmlasset14,976 bytesassets/style-specimens/web/09-pixel-side-scroller.jpgasset60,901 bytesassets/style-specimens/web/10-bauhaus-geometric.htmlasset4,955 bytesassets/style-specimens/web/10-bauhaus-geometric.jpgasset70,772 bytesassets/style-specimens/web/11-dark-editorial.htmlasset4,452 bytesassets/style-specimens/web/11-dark-editorial.jpgasset58,035 bytesassets/style-specimens/web/12-warm-editorial.htmlasset3,922 bytesassets/style-specimens/web/12-warm-editorial.jpgasset77,516 bytesassets/style-specimens/web/13-glassmorphism-bento.htmlasset5,807 bytesassets/style-specimens/web/13-glassmorphism-bento.jpgasset73,854 bytesassets/style-specimens/web/14-angled-fluid-gradient.htmlasset4,064 bytesassets/style-specimens/web/14-angled-fluid-gradient.jpgasset87,254 bytesassets/style-specimens/web/15-utility-colorful-docs.htmlasset5,911 bytesassets/style-specimens/web/15-utility-colorful-docs.jpgasset67,154 bytesassets/style-specimens/web/16-terminal-core.htmlasset5,068 bytesassets/style-specimens/web/16-terminal-core.jpgasset64,169 bytesassets/style-specimens/web/17-functional-brutalism.htmlasset5,608 bytesassets/style-specimens/web/17-functional-brutalism.jpgasset119,761 bytesassets/style-specimens/web/18-gallery-dark.htmlasset5,021 bytesassets/style-specimens/web/18-gallery-dark.jpgasset23,228 bytesassets/style-specimens/web/19-swiss-monochrome.htmlasset3,363 bytesassets/style-specimens/web/19-swiss-monochrome.jpgasset68,812 bytesassets/style-specimens/web/20-kenya-hara-white-gallery.htmlasset3,263 bytesassets/style-specimens/web/20-kenya-hara-white-gallery.jpgasset35,039 bytesassets/style-specimens/xhs/01-specimen-journal.htmlasset5,924 bytesassets/style-specimens/xhs/01-specimen-journal.jpgasset128,411 bytesassets/style-specimens/xhs/02-sticker-notebook.htmlasset6,303 bytesassets/style-specimens/xhs/02-sticker-notebook.jpgasset117,202 bytesassets/style-specimens/xhs/03-index-ink.htmlasset4,675 bytesassets/style-specimens/xhs/03-index-ink.jpgasset97,791 bytesassets/style-specimens/xhs/04-panorama-strip.htmlasset4,193 bytesassets/style-specimens/xhs/04-panorama-strip.jpgasset103,905 bytesassets/style-specimens/xhs/05-daily-paper.htmlasset5,994 bytesassets/style-specimens/xhs/05-daily-paper.jpgasset125,334 bytesassets/style-specimens/xhs/06-trading-cards.htmlasset5,402 bytesassets/style-specimens/xhs/06-trading-cards.jpgasset131,267 bytesassets/style-specimens/xhs/07-blank-vertical.htmlasset2,876 bytesassets/style-specimens/xhs/07-blank-vertical.jpgasset57,747 bytesassets/style-specimens/xhs/08-area-infographic.htmlasset5,098 bytesassets/style-specimens/xhs/08-area-infographic.jpgasset132,565 bytesassets/style-specimens/xhs/_kit/README.mddoc867 bytesassets/style-specimens/xhs/_kit/birds.jsruns3,716 bytesassets/style-specimens/xhs/_kit/stickers/Accipiter_nisus.webpasset23,678 bytesassets/style-specimens/xhs/_kit/stickers/Agapornis_pullarius.webpasset28,328 bytesassets/style-specimens/xhs/_kit/stickers/Aix_galericulata.webpasset34,872 bytesassets/style-specimens/xhs/_kit/stickers/Alcedo_atthis.webpasset24,452 bytesassets/style-specimens/xhs/_kit/stickers/Ara_macao.webpasset18,770 bytesassets/style-specimens/xhs/_kit/stickers/Bubo_bubo.webpasset39,888 bytesassets/style-specimens/xhs/_kit/stickers/Cacatua_galerita.webpasset16,160 bytesassets/style-specimens/xhs/_kit/stickers/Calyptorhynchus_banksii.webpasset31,174 bytesassets/style-specimens/xhs/_kit/stickers/Carpodacus_erythrinus.webpasset29,236 bytesassets/style-specimens/xhs/_kit/stickers/Chrysolophus_pictus.webpasset25,828 bytesassets/style-specimens/xhs/_kit/stickers/Coracias_caudatus.webpasset31,028 bytesassets/style-specimens/xhs/_kit/stickers/Ensifera_ensifera.webpasset20,906 bytesassets/style-specimens/xhs/_kit/stickers/Eolophus_roseicapilla.webpasset25,960 bytesassets/style-specimens/xhs/_kit/stickers/Grus_japonensis.webpasset16,018 bytesassets/style-specimens/xhs/_kit/stickers/LICENSE.mddoc343 bytesassets/style-specimens/xhs/_kit/stickers/Merops_apiaster.webpasset23,060 bytesassets/style-specimens/xhs/_kit/stickers/Nestor_notabilis.webpasset40,610 bytesassets/style-specimens/xhs/_kit/stickers/Platycercus_icterotis.webpasset24,216 bytesassets/style-specimens/xhs/_kit/stickers/Psephotellus_chrysopterygius.webpasset27,002 bytesassets/style-specimens/xhs/_kit/stickers/Psittacus_erithacus.webpasset28,358 bytesassets/style-specimens/xhs/_kit/stickers/Trichoglossus_moluccanus.webpasset25,454 bytesassets/style-specimens/xhs/_kit/stickers/Upupa_epops.webpasset25,422 bytesassets/style-specimens/xhs/_kit/stickers/Vini_kuhlii.webpasset27,374 bytesassets/style-specimens/xhs/_kit/xhs.cssasset2,547 bytesassets/style-specimens/xhs/_kit/xhs.jsruns1,819 bytesdemos/c1-ios-prototype-en.htmlasset35,163 bytesdemos/c1-ios-prototype.htmlasset35,149 bytesdemos/c2-slides-pptx-en.htmlasset32,906 bytesdemos/c2-slides-pptx.htmlasset32,975 bytesdemos/c3-motion-design-en.htmlasset37,031 bytesdemos/c3-motion-design.htmlasset37,048 bytesdemos/c4-tweaks-en.htmlasset31,102 bytesdemos/c4-tweaks.htmlasset31,150 bytesdemos/c5-infographic-en.htmlasset24,941 bytesdemos/c5-infographic.htmlasset24,823 bytesdemos/c6-expert-review-en.htmlasset26,382 bytesdemos/c6-expert-review.htmlasset26,822 bytesdemos/hero-animation-v10-en.htmlasset48,712 bytesdemos/md-html-narration/md-html-demo.htmlasset37,926 bytesdemos/md-html-narration/script.mddoc3,452 bytesdemos/voiceover-demo/script.mddoc589 bytesdemos/voiceover-demo/什么是token.htmlasset11,988 bytesdemos/w1-brand-protocol-en.htmlasset20,572 bytesdemos/w1-brand-protocol.htmlasset20,905 bytesdemos/w2-junior-designer-en.htmlasset31,305 bytesdemos/w2-junior-designer.htmlasset31,764 bytesdemos/w3-fallback-advisor-en.htmlasset23,901 bytesdemos/w3-fallback-advisor.htmlasset26,413 bytespackage-lock.jsonasset28,566 bytespackage.jsonruns133 bytesreferences/about-author.mddoc10,459 bytesreferences/ai-video-review.mddoc4,037 bytesreferences/animation-best-practices.mddoc22,500 bytesreferences/animation-pitfalls.mddoc30,806 bytesreferences/animations.mddoc7,762 bytesreferences/app-prototype.mddoc11,895 bytesreferences/apple-gallery-showcase.mddoc11,568 bytesreferences/audio-design-rules.mddoc9,613 bytesreferences/brand-asset-protocol.mddoc15,424 bytesreferences/camera-language.mddoc23,221 bytesreferences/cinematic-patterns.mddoc11,086 bytesreferences/content-guidelines.mddoc11,791 bytesreferences/critique-guide.mddoc9,022 bytesreferences/design-context.mddoc6,704 bytesreferences/design-styles.mddoc108,231 bytesreferences/directions.mddoc12,686 bytesreferences/editable-pptx.mddoc18,570 bytesreferences/evolution.mddoc7,242 bytesreferences/experience.mddoc5,220 bytesreferences/gsap-recipes.mddoc35,591 bytesreferences/hero-animation-case-study.mddoc11,570 bytesreferences/hyperframes-backend.mddoc7,480 bytesreferences/launch-film-director-notes.mddoc14,886 bytesreferences/materials.mddoc5,679 bytesreferences/modules/deck.mddoc4,394 bytesreferences/modules/infographic.mddoc2,526 bytesreferences/modules/motion.mddoc6,470 bytesreferences/modules/web.mddoc2,467 bytesreferences/modules/xiaohongshu.mddoc6,573 bytesreferences/multi-perspective-parallel-case-study.mddoc11,093 bytesreferences/pptx-from-rendered-html.mddoc10,415 bytesreferences/react-setup.mddoc9,682 bytesreferences/scene-templates.mddoc7,314 bytesreferences/sfx-library.mddoc9,762 bytesreferences/slide-decks.mddoc36,181 bytesreferences/storyboard-basics.mddoc23,987 bytesreferences/tweaks-system.mddoc9,015 bytesreferences/typography.mddoc18,751 bytesreferences/ui-demo-animation.mddoc29,109 bytesreferences/verification.mddoc6,998 bytesreferences/video-export.mddoc11,527 bytesreferences/voiceover-pipeline.mddoc20,121 bytesreferences/workflow.mddoc10,921 bytesscripts/add-music.shruns4,150 bytesscripts/build_specimens.pyruns4,456 bytesscripts/capabilities.pyruns3,888 bytesscripts/cloud/ai-review-video.pyruns20,433 bytesscripts/cloud/tts-doubao.mjsruns10,071 bytesscripts/convert-formats.shruns3,000 bytesscripts/design-gate-hook.shruns3,459 bytesscripts/design_lint.pyruns28,487 bytesscripts/export_deck_pdf.mjsruns3,209 bytesscripts/export_deck_pptx.mjsruns3,800 bytesscripts/export_deck_stage_pdf.mjsruns4,781 bytesscripts/fetch_images.pyruns4,442 bytesscripts/gen_deck_thumbs.mjsruns3,037 bytesscripts/html2pptx.jsruns34,510 bytesscripts/learn.pyruns10,510 bytesscripts/mix-voiceover.shruns4,461 bytesscripts/narrate-pipeline.mjsruns12,530 bytesscripts/pptx_from_rendered.pyruns29,623 bytesscripts/ref_board.pyruns6,865 bytesscripts/render-narration.shruns5,425 bytesscripts/render-video-seek.jsruns9,778 bytesscripts/render-video.jsruns12,293 bytesscripts/sfx-cues.shruns1,628 bytesscripts/tests/fixtures/assets/logo.pngasset76 bytesscripts/tests/fixtures/lint_broken.htmlasset391 bytesscripts/tests/fixtures/lint_clean.htmlasset778 bytesscripts/tests/fixtures/lint_offline.htmlasset302 bytesscripts/tests/fixtures/lint_reskin.htmlasset1,749 bytesscripts/tests/fixtures/lint_slop.htmlasset1,742 bytesscripts/tests/fixtures/lint_tricky_bad.htmlasset633 bytesscripts/tests/fixtures/lint_tricky_ok.htmlasset1,347 bytesscripts/tests/fixtures/mixed_text.htmlasset1,091 bytesscripts/tests/fixtures/xhs_bad.htmlasset1,520 bytesscripts/tests/fixtures/xhs_ok.htmlasset702 bytesscripts/tests/test_compare_failures.pyruns3,065 bytesscripts/tests/test_design_lint.pyruns8,606 bytesscripts/tests/test_pptx_from_rendered.pyruns4,099 bytesscripts/tests/test_xhs_render.pyruns2,062 bytesscripts/verify-video.shruns4,996 bytesscripts/verify.pyruns5,451 bytesscripts/xhs_render.pyruns10,925 bytestest-prompts.jsonasset4,018 bytes
Read SKILL.md
# 花叔Design · Huashu-Design
## 你是谁
**你是设计师，不是写HTML的程序员。** HTML只是你的媒介，就像别人用Figma、
用AE、用InDesign——工具不定义你，交付标准才定义你。
那个标准是：**产出要让人认不出是AI做的。** 不是「AI做得还行」，
是别人看到会问「这哪个工作室做的」。你有能力达到——现在的模型可以调用任何一位
顶尖设计师、任何一家顶级工作室积累的方法和品味，**限制通常不在能力，
在于有没有先认定自己要做到那个水准**。
还有一件事要先认清：**你有自己的默认审美。** 不加约束时你会滑向暖奶油底、高反差衬线标题、
陶土色点缀、全大写小标签、01/02/03 编号——那是 Claude 自己的配色，也是 2026 年 AI 生成页面Skills included
- huashu-design
Repository facts
- License
- MIT
- Created
- Apr 19, 2026
- Last pushed
- Nov 4, 2026
- Forks
- 3,113
- Open issues
- 0
- Project activity
- Active
Rank over the last 12 weeks
Now #72 · best #71 · up 9 in 30 days
- #79 from Oct 23 to Oct 25
- #74 from Oct 28 to Oct 29
- #75 from Oct 30 to Oct 31
- #74 on Nov 1
- #73 from Nov 2 to Nov 4
- #72 since Nov 5
15 earlier periods
- #69 on Aug 2
- #70 on Aug 8
- #71 from Aug 9 to Aug 16
- #72 from Aug 17 to Aug 18
- #73 on Aug 19
- #75 from Aug 20 to Aug 23
- #76 from Aug 24 to Aug 26
- #77 from Aug 27 to Sep 1
- #78 from Sep 2 to Sep 3
- #79 from Sep 4 to Sep 13
- #80 from Sep 14 to Sep 20
- #79 from Sep 21 to Sep 30
- #80 from Oct 1 to Oct 4
- #81 from Oct 5 to Oct 20
- #80 from Oct 21 to Oct 22
Before you install
Network or broad shellAutomated signals, not a guarantee
Checked Nov 3, 2026
Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.
Show 15 notes
SKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedSKILL.md:1Analysis incomplete: Referenced executable target unavailable; not analyzedassets/style-specimens/east/12-japan-magazine-dense.html:76Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/east/12-japan-magazine-dense.html:74Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/east/12-japan-magazine-dense.html:75Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/web/08-cinematic-sound-viz.html:24Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/web/08-cinematic-sound-viz.html:22Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/web/08-cinematic-sound-viz.html:23Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/web/09-pixel-side-scroller.html:27Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/web/09-pixel-side-scroller.html:25Analysis incomplete: physical or joined line exceeds character limitassets/style-specimens/web/09-pixel-side-scroller.html:26Analysis incomplete: physical or joined line exceeds character limit
- No broad tool permissions
- 4 dangerous shell commandsin 4 files: scripts/convert-formats.sh:81 scripts/html2pptx.js:188 scripts/render-narration.sh:146 and 1 more
- 1,079 network referencesin 165 files: package-lock.json:14 references/about-author.md:3 README.md:10 and 162 more
- 1 obfuscation signalin 1 file: assets/style-specimens/xhs/_kit/birds.js:2
- No instruction overrides
- 42 executable scriptsin 42 files: assets/android_frame.jsx:1 assets/animations.jsx:1 assets/browser_window.jsx:1 and 39 more
- 49 references to secretsin 16 files: scripts/cloud/ai-review-video.py:13 scripts/cloud/tts-doubao.mjs:23 references/voiceover-pipeline.md:194 and 13 more
- No requests to vote in Hot
Show all 1,175 signals by file
.env.example
- Network accessline 1
# 豆包语音 TTS（火山引擎 openspeech） # 申请地址：https://console.volcengine.com/speech - Network accessline 2
# 申请地址：https://console.volcengine.com/speech - Access to secretsline 3
[Credential-related source omitted] - Network accessline 4
DOUBAO_TTS_VOICE_ID=your_clone_voice_id_here DOUBAO_TTS_CLUSTER=volcano_icl DOUBAO_TTS_ENDPOINT=https://openspeech.bytedance.com/api/v1/tts - Network accessline 6
DOUBAO_TTS_ENDPOINT=https://openspeech.bytedance.com/api/v1/tts - Network accessline 8
# AI看片评审（可选云能力，scripts/cloud/ai-review-video.py） # 火山方舟 API Key，申请地址：https://console.volcengine.com/ark - Network accessline 9
# 火山方舟 API Key，申请地址：https://console.volcengine.com/ark - Access to secretsline 10
[Credential-related source omitted]
.gitignore
- Access to secretsline 13
[Credential-related source omitted]
README.en.md
- Network accessline 10
[](LICENSE) - Network accessline 11
[](https://skills.sh) - Network accessline 12
[](https://skills.sh) - Network accessline 46
<p align="center"> <img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.gif" alt="huashu-design 3.0 launch film" width="100%"> - Network accessline 47
<img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.gif" alt="huashu-design 3.0 launch film" width="100%"> - Network accessline 50
<p align="center"><sub> ▲ 3.0 launch film · 32s · every page in it was designed by 3.0 itself; edited with <a href="https://github.com/alchaincyf/huashu-motion">huashu-motion</a><br> 👉 <a href="https://github.com/alchaincyf/huashu-desig - Network accessline 51
▲ 3.0 launch film · 32s · every page in it was designed by 3.0 itself; edited with <a href="https://github.com/alchaincyf/huashu-motion">huashu-motion</a><br> 👉 <a href="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0 - Network accessline 52
👉 <a href="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.mp4">Download MP4 (1080p · with music · 24MB)</a> · - Network accessline 53
<a href="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/hero-animation-v10-en.mp4">2.0 hero animation (English)</a> - Network accessline 68
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-hero.jpg" width="100%" alt="Hokusai exhibition hero"></p> - Network accessline 72
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-prussian-blue.jpg" width="100%" alt="Prussian blue chapter"></p> - Network accessline 73
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-all-46.jpg" width="60%" alt="All 46 prints"></p> - Network accessline 81
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-mingji-birding-app.jpg" width="75%" alt="Mingji birding app board"></p> - Network accessline 89
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-recipe-app.jpg" width="75%" alt="Recipe app board"></p> - Network accessline 95
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-qianli-cover.jpg" width="100%" alt="Lecture cover"></p> - Network accessline 96
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-qianli-pages.jpg" width="100%" alt="Four lecture slides"></p> - Network accessline 102
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-blackhole-pages.jpg" width="100%" alt="Black hole deck, four slides"></p> - Network accessline 108
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-plant-health-app.jpg" width="75%" alt="Green Thumb plant health app"></p> - Network accessline 114
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-travel-archive.jpg" width="100%" alt="Travel archive"></p> - Network accessline 131
> > ```bash > git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design - Network accessline 132
> ```bash > git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design > ``` - Network accessline 133
> git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design - Network accessline 151
<p align="center"> <a href="https://star-history.com/#alchaincyf/huashu-design&Date"> - Network accessline 152
<a href="https://star-history.com/#alchaincyf/huashu-design&Date"> - Network accessline 153
<img src="https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date" alt="huashu-design Star History" width="80%"> - Network accessline 182
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor-en.gif" width="100%"></p> - Network accessline 198
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype-en.gif" width="100%"></p> - Network accessline 204
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design-en.gif" width="100%"></p> - Network accessline 210
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx-en.gif" width="100%"></p> - Network accessline 216
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks-en.gif" width="100%"></p> - Network accessline 222
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic-en.gif" width="100%"></p> - Network accessline 228
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review-en.gif" width="100%"></p> - Network accessline 234
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer-en.gif" width="100%"></p> - Network accessline 240
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol-en.gif" width="100%"></p> - Network accessline 406
| Language | Maintainer | Repository | |---|---|---| | English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) | - Network accessline 407
|---|---|---| | English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) | | 한국어 (Korean) | [@ktkarchive](https://github.com/ktkarchive) | [ktkarc - Network accessline 408
| English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) | - Network accessline 409
| 한국어 (Korean) | [@ktkarchive](https://github.com/ktkarchive) | [ktkarchive/ktk-design](https://github.com/ktkarchive/ktk-design) | - Network accessline 410
| Tiếng Việt (Vietnamese) | [@letrquan](https://github.com/letrquan) | [letrquan/huashu-design](https://github.com/letrquan/huashu-design) | - Network accessline 422
One exception: the demo stickers in `assets/style-specimens/xhs/_kit/stickers/` come from [huashu-bird-sticker](https://github.com/alchaincyf/huashu-bird-sticker) and are licensed under PolyForm Shield 1.0.0 (see the LICENSE.md in that fold - Network accessline 430
| Platform | Handle | Link | |---|---|---| | X / Twitter | @AlchainHust | https://x.com/AlchainHust | - Network accessline 431
|---|---|---| | X / Twitter | @AlchainHust | https://x.com/AlchainHust | | WeChat Official Account | 花叔 | Search "花叔" in WeChat | - Network accessline 432
| X / Twitter | @AlchainHust | https://x.com/AlchainHust | - Network accessline 433
| WeChat Official Account | 花叔 | Search "花叔" in WeChat | | Bilibili | 花叔 | https://space.bilibili.com/14097567 | | YouTube | 花叔 | https://www.youtube.com/@Alchain | - Network accessline 434
| Bilibili | 花叔 | https://space.bilibili.com/14097567 | - Network accessline 435
| YouTube | 花叔 | https://www.youtube.com/@Alchain | - Network accessline 436
| Xiaohongshu | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf | - Network accessline 437
| Official Site | huasheng.ai | https://www.huasheng.ai/ | - Network accessline 438
| Developer Hub | bookai.top | https://bookai.top | - Network accessline 442
<p align="center"><img src="https://raw.githubusercontent.com/alchaincyf/alchaincyf/main/assets/follow.svg" width="100%" alt="Follow Huashu: WeChat 花叔 · Bilibili 花叔v · Xiaohongshu 花叔"></p>
README.md
- Network accessline 10
[](LICENSE) - Network accessline 11
[](https://skills.sh) - Network accessline 12
[](https://skills.sh) - Network accessline 44
<p align="center"> <img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.gif" alt="huashu-design 3.0 发布片" width="100%"> - Network accessline 45
<img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.gif" alt="huashu-design 3.0 发布片" width="100%"> - Network accessline 48
<p align="center"><sub> ▲ 3.0 发布片 · 32 秒 · 片里每一页设计都是 3.0 自己做的，剪辑用的是 <a href="https://github.com/alchaincyf/huashu-motion">huashu-motion</a><br> 👉 <a href="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.m - Network accessline 49
▲ 3.0 发布片 · 32 秒 · 片里每一页设计都是 3.0 自己做的，剪辑用的是 <a href="https://github.com/alchaincyf/huashu-motion">huashu-motion</a><br> 👉 <a href="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.mp4">下载 MP4（1080p · 含配乐 · 2 - Network accessline 50
👉 <a href="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/launch-3.0.mp4">下载 MP4（1080p · 含配乐 · 24MB）</a> · - Network accessline 51
<a href="https://www.huasheng.ai/huashu-design-hero/">2.0 的带音效 HTML 互动版</a> - Network accessline 66
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-hero.jpg" width="100%" alt="富岳三十六景线上展首屏：暗场满屏《山下白雨》"></p> - Network accessline 70
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-prussian-blue.jpg" width="100%" alt="一种进口的蓝：普鲁士蓝章节"></p> - Network accessline 71
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-hokusai-all-46.jpg" width="60%" alt="全四十六幅作品墙"></p> - Network accessline 79
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-mingji-birding-app.jpg" width="75%" alt="鸣迹：听到一只鸟，撕下一张贴纸"></p> - Network accessline 87
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-recipe-app.jpg" width="75%" alt="今晚吃啥：一道菜一页方子"></p> - Network accessline 93
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-qianli-cover.jpg" width="100%" alt="千里江山图讲座封面"></p> - Network accessline 94
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-qianli-pages.jpg" width="100%" alt="一张多大的画、希孟年十八岁、小如豆、颜色来自石头"></p> - Network accessline 100
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-blackhole-pages.jpg" width="100%" alt="黑洞科普 PPT 四页"></p> - Network accessline 106
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-plant-health-app.jpg" width="75%" alt="绿拇指：把植物当成会呼吸的生命体征来读"></p> - Network accessline 112
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v3.0.0/case-travel-archive.jpg" width="100%" alt="旅居档案"></p> - Network accessline 120
<p align="center"> <a href="https://www.youtube.com/watch?v=m-_BlUdcIvw"><img src="https://img.youtube.com/vi/m-_BlUdcIvw/maxresdefault.jpg" alt="huashu-design 使用教程" width="70%"></a> - Network accessline 121
<a href="https://www.youtube.com/watch?v=m-_BlUdcIvw"><img src="https://img.youtube.com/vi/m-_BlUdcIvw/maxresdefault.jpg" alt="huashu-design 使用教程" width="70%"></a> - Network accessline 124
<p align="center"><sub>👉 <a href="https://www.youtube.com/watch?v=m-_BlUdcIvw">在 YouTube 观看完整教程</a></sub></p> - Network accessline 141
> > ```bash > git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design - Network accessline 142
> ```bash > git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design > ``` - Network accessline 143
> git clone https://github.com/alchaincyf/huashu-design.git ~/.claude/skills/huashu-design - Network accessline 161
<p align="center"> <a href="https://star-history.com/#alchaincyf/huashu-design&Date"> - Network accessline 162
<a href="https://star-history.com/#alchaincyf/huashu-design&Date"> - Network accessline 163
<img src="https://api.star-history.com/svg?repos=alchaincyf/huashu-design&type=Date" alt="huashu-design Star History" width="80%"> - Network accessline 190
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w3-fallback-advisor.gif" width="100%"></p> - Network accessline 206
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c1-ios-prototype.gif" width="100%"></p> - Network accessline 212
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c3-motion-design.gif" width="100%"></p> - Network accessline 218
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c2-slides-pptx.gif" width="100%"></p> - Network accessline 224
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c4-tweaks.gif" width="100%"></p> - Network accessline 230
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c5-infographic.gif" width="100%"></p> - Network accessline 236
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/c6-expert-review.gif" width="100%"></p> - Network accessline 242
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w2-junior-designer.gif" width="100%"></p> - Network accessline 248
<p align="center"><img src="https://github.com/alchaincyf/huashu-design/releases/download/v2.0/w1-brand-protocol.gif" width="100%"></p> - Network accessline 256
> **Live demo · [https://www.huasheng.ai/parrots/](https://www.huasheng.ai/parrots/)** - Network accessline 262
> **Live demo · [https://skill-huasheng.vercel.app](https://skill-huasheng.vercel.app)** - Network accessline 432
**[FanBox · Coding Agent 的驾驶舱](https://github.com/alchaincyf/fanbox)** 的三套界面皮肤，就是用 huashu-design 设计的。指挥 Claude Code / Codex 干活，看清它碰过的每个文件、每一行改动。 - Network accessline 434
[](https://github.com/alchaincyf/fanbox) - Network accessline 442
| 语言 | 维护者 | 仓库 | |---|---|---| | English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) | - Network accessline 443
|---|---|---| | English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) | | 한국어（韩语） | [@ktkarchive](https://github.com/ktkarchive) | [ktkarchive/ - Network accessline 444
| English | [@namandhakad712](https://github.com/namandhakad712) | [namandhakad712/huashu-design-en](https://github.com/namandhakad712/huashu-design-en) | - Network accessline 445
| 한국어（韩语） | [@ktkarchive](https://github.com/ktkarchive) | [ktkarchive/ktk-design](https://github.com/ktkarchive/ktk-design) | - Network accessline 446
| Tiếng Việt（越南语） | [@letrquan](https://github.com/letrquan) | [letrquan/huashu-design](https://github.com/letrquan/huashu-design) | - Network accessline 458
唯一例外：`assets/style-specimens/xhs/_kit/stickers/` 里的演示贴纸来自 [huashu-bird-sticker](https://github.com/alchaincyf/huashu-bird-sticker)，按 PolyForm Shield 1.0.0 授权（见该文件夹的 LICENSE.md），只用来演示版式，你的作品请换成自己的素材。 - Network accessline 466
| 平台 | 账号 | 链接 | |---|---|---| | X / Twitter | @AlchainHust | https://x.com/AlchainHust | - Network accessline 467
|---|---|---| | X / Twitter | @AlchainHust | https://x.com/AlchainHust | | 公众号 | 花叔 | 微信搜索「花叔」 | - Network accessline 468
| X / Twitter | @AlchainHust | https://x.com/AlchainHust | - Network accessline 469
| 公众号 | 花叔 | 微信搜索「花叔」 | | B 站 | 花叔 | https://space.bilibili.com/14097567 | | YouTube | 花叔 | https://www.youtube.com/@Alchain | - Network accessline 470
| B 站 | 花叔 | https://space.bilibili.com/14097567 | - Network accessline 471
| YouTube | 花叔 | https://www.youtube.com/@Alchain | - Network accessline 472
| 小红书 | 花叔 | https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf | - Network accessline 473
| 官网 | huasheng.ai | https://www.huasheng.ai/ | - Network accessline 474
| 开发者主页 | bookai.top | https://bookai.top | - Network accessline 478
<p align="center"><img src="https://raw.githubusercontent.com/alchaincyf/alchaincyf/main/assets/follow.svg" width="100%" alt="关注花叔：公众号「花叔」· B站「花叔v」· 小红书「花叔」"></p>
SECURITY.md
SKILL.md
- Network accessline 4
metadata: author: "花叔" homepage: "https://github.com/alchaincyf" - Network accessline 5
author: "花叔" homepage: "https://github.com/alchaincyf" repository: "https://github.com/alchaincyf/huashu-design" - Network accessline 6
homepage: "https://github.com/alchaincyf" - Network accessline 7
repository: "https://github.com/alchaincyf/huashu-design" - Network accessline 202
本 skill 由花叔开发维护，仓库：https://github.com/alchaincyf/huashu-design - Network accessline 213
- 成功：第一行就是最新版本，和本文件开头的 `metadata.version` 比较，然后写入 `<今天> ok`。远程更高时，先完成用户的任务，结束时告诉用户：「huashu-design 有新版本 vX.Y.Z，更新说明见 https://github.com/alchaincyf/huashu-design/releases ，需要时运行 `git -C <本目录> pull --ff-only`；不想再收到提醒，把 `.last-update-check` 的内容
assets/android_frame.jsx
- Executable scriptline 1
Executable file
assets/animations.jsx
- Executable scriptline 1
Executable file
assets/banner.svg
- Network accessline 1
<svg width="1200" height="400" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg"> - Network accessline 2
<defs> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap'); - Network accessline 3
<style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap'); </style> - Network accessline 4
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap');
assets/browser_window.jsx
- Executable scriptline 1
Executable file - Network accessline 5
* * 用法： * <BrowserWindow url="https://example.com" title="Example"> - Network accessline 6
* 用法： * <BrowserWindow url="https://example.com" title="Example"> * <YourWebPage /> - Network accessline 7
* <BrowserWindow url="https://example.com" title="Example"> - Network accessline 119
function BrowserWindow({ title = 'New Tab', url = 'https://example.com', - Network accessline 120
title = 'New Tab', url = 'https://example.com', width = 1200, - Network accessline 121
url = 'https://example.com',
assets/cursor.jsx
- Executable scriptline 1
Executable file
assets/deck_stage.js
- Executable scriptline 1
Executable file
assets/design_canvas.jsx
- Executable scriptline 1
Executable file
assets/director-notes-samples/launch-film-30s-sample.md
- Network accessline 198
**字体加载策略**： - Google Fonts 预连接 `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` - Network accessline 199
- Google Fonts 预连接 `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` - Network accessline 1521
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 1522
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 1523
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/ios_frame.jsx
- Executable scriptline 1
Executable file
assets/macos_window.jsx
- Executable scriptline 1
Executable file
assets/narration_stage.jsx
- Executable scriptline 1
Executable file
assets/personal-asset-index.example.json
- Network accessline 25
"social_media": { "github": { "url": "https://github.com/yourname", - Network accessline 26
"github": { "url": "https://github.com/yourname", "username": "yourname" - Network accessline 27
"url": "https://github.com/yourname", - Network accessline 29
}, "youtube": { "url": "https://www.youtube.com/@YourChannel", - Network accessline 30
"youtube": { "url": "https://www.youtube.com/@YourChannel", "channel_name": "频道名" - Network accessline 31
"url": "https://www.youtube.com/@YourChannel", - Network accessline 37
"websites": { "main_site": { "url": "https://yoursite.com", - Network accessline 38
"main_site": { "url": "https://yoursite.com", "description": "网站描述", - Network accessline 39
"url": "https://yoursite.com",
assets/showcases/cover/cover-build.html
- Network accessline 5
<meta name="viewport" content="width=1200"> <title>Claude Code Agent - Build Studio Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 6
<title>Claude Code Agent - Build Studio Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> <style> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 188
<!-- Corner marks --> <div class="corner-mark corner-tl"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> - Network accessline 189
<div class="corner-mark corner-tl"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/> - Network accessline 190
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> - Network accessline 194
</div> <div class="corner-mark corner-br"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> - Network accessline 195
<div class="corner-mark corner-br"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/> - Network accessline 196
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
assets/showcases/cover/cover-takram.html
- Network accessline 5
<meta name="viewport" content="width=1200"> <title>Claude Code Agent - Takram Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet" - Network accessline 6
<title>Claude Code Agent - Takram Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 166
<!-- The diagram as art --> <svg class="diagram" viewBox="0 0 1200 510" xmlns="http://www.w3.org/2000/svg"> - Network accessline 167
<svg class="diagram" viewBox="0 0 1200 510" xmlns="http://www.w3.org/2000/svg">
assets/showcases/infographic/infographic-build.html
- Network accessline 5
<meta name="viewport" content="width=1080"> <title>AI Memory System Optimization — Build Studio Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 6
<title>AI Memory System Optimization — Build Studio Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> <style> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
assets/showcases/infographic/infographic-takram.html
- Network accessline 5
<meta name="viewport" content="width=1080"> <title>AI Memory System Optimization — Takram Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600;700&display=sw - Network accessline 6
<title>AI Memory System Optimization — Takram Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
assets/showcases/ppt/ppt-build.html
- Network accessline 5
<meta name="viewport" content="width=1920"> <title>GLM-4.7 Coding Benchmark - Build Studio Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 6
<title>GLM-4.7 Coding Benchmark - Build Studio Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> <style> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
assets/showcases/ppt/ppt-takram.html
- Network accessline 5
<meta name="viewport" content="width=1920"> <title>GLM-4.7 Coding Benchmark - Takram Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel=" - Network accessline 6
<title>GLM-4.7 Coding Benchmark - Takram Style</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
assets/showcases/website-ai-nav/ainav-build.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>AI Compass — Build Studio Style</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>AI Compass — Build Studio Style</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 9
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-ai-nav/ainav-pentagram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>AI Compass — Pentagram Style</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>AI Compass — Pentagram Style</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=sw - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 9
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-ai-nav/ainav-takram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>AI Compass — Takram Style</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>AI Compass — Takram Style</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 9
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-ai-writing/aiwriting-build.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Inkwell — AI Writing Assistant</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 6
<title>Inkwell — AI Writing Assistant</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@latest"></script> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-ai-writing/aiwriting-pentagram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Inkwell — AI Writing Assistant</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="styleshee - Network accessline 6
<title>Inkwell — AI Writing Assistant</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@la - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-ai-writing/aiwriting-takram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Inkwell — AI Writing Assistant</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 6
<title>Inkwell — AI Writing Assistant</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@latest - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-devdocs/devdocs-build.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Nexus API Documentation</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>Nexus API Documentation</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet"> - Network accessline 10
<script src="https://unpkg.com/lucide@latest"></script> - Access to secretsline 334
[Credential-related source omitted]
assets/showcases/website-devdocs/devdocs-pentagram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Nexus API Documentation</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>Nexus API Documentation</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 10
<script src="https://unpkg.com/lucide@latest"></script> - Access to secretsline 414
[Credential-related source omitted]
assets/showcases/website-devdocs/devdocs-takram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Nexus API Documentation</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 6
<title>Nexus API Documentation</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 7
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 8
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 9
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;600&display=swap" rel="stylesheet"> - Network accessline 10
<script src="https://unpkg.com/lucide@latest"></script> - Access to secretsline 448
[Credential-related source omitted]
assets/showcases/website-homepage/homepage-build.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Alex Chen — Indie Developer & AI Creator</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 6
<title>Alex Chen — Indie Developer & AI Creator</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@latest"></script> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-homepage/homepage-pentagram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Alex Chen — Indie Developer & AI Creator</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel= - Network accessline 6
<title>Alex Chen — Indie Developer & AI Creator</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> <script src="https://unpkg.com - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-homepage/homepage-takram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Alex Chen — Indie Developer & AI Creator</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;600&display=swap" rel="stylesh - Network accessline 6
<title>Alex Chen — Indie Developer & AI Creator</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;600&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@ - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;600&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-saas/saas-build.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Meridian — Business Intelligence for Modern Teams</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 6
<title>Meridian — Business Intelligence for Modern Teams</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> <script src="https://unpkg.com/lucide@latest"></script> - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-saas/saas-pentagram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Meridian — Business Intelligence for Modern Teams</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&displ - Network accessline 6
<title>Meridian — Business Intelligence for Modern Teams</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> <script src="http - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/showcases/website-saas/saas-takram.html
- Network accessline 5
<meta name="viewport" content="width=1440"> <title>Meridian — Business Intelligence for Modern Teams</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=s - Network accessline 6
<title>Meridian — Business Intelligence for Modern Teams</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet"> <script src="https:// - Network accessline 7
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet"> - Network accessline 8
<script src="https://unpkg.com/lucide@latest"></script>
assets/style-specimens/app/01-hardware-panel.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>01 硬件面板</title> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Doto:wght@700;900&family=Noto+Sans+SC:wght@500;700&display=swap" rel="sty - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>01 硬件面板</title> <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Doto:wght@700;900&family=Noto+Sans+SC:wght@500;700&display=swap" rel="stylesheet"> <style - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Doto:wght@700;900&family=Noto+Sans+SC:wght@500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/02-liquid-glass.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>02 液态玻璃</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>02 液态玻璃</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/03-playful-3d.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>03 玩味 3D 材质</title> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Noto+Sans+SC:wght@500;700;900&display=swap" rel="stylesheet" - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>03 玩味 3D 材质</title> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Noto+Sans+SC:wght@500;700;900&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Noto+Sans+SC:wght@500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/app/04-friendly-fintech.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>04 友好金融</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>04 友好金融</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/app/05-pro-camera.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>05 专业相机工具</title> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>05 专业相机工具</title> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/06-topo-outdoor.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>06 户外地形工具</title> <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>06 户外地形工具</title> <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/07-feed-waterfall.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>07 中文内容瀑布流</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>07 中文内容瀑布流</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/app/08-command-palette.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>08 键盘优先命令面板</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&d - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>08 键盘优先命令面板</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/09-health-color-code.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>09 健康数据颜色编码</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>09 健康数据颜色编码</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/10-native-polish.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>10 原生精修</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>10 原生精修</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/11-gentle-encouraging.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>11 柔和暗色鼓励式</title> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>11 柔和暗色鼓励式</title> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/app/12-editorial-reader.html
- Network accessline 1
<!doctype html> <html lang="zh"><head><meta charset="utf-8"><title>12 编辑式阅读</title> <link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&family=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@500;600& - Network accessline 2
<html lang="zh"><head><meta charset="utf-8"><title>12 编辑式阅读</title> <link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&family=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@500;600&display=swap" re - Network accessline 3
<link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&family=Noto+Serif+SC:wght@400;600;700&family=Inter:wght@500;600&display=swap" rel="stylesheet">
assets/style-specimens/east/01-lu-jingren-bookcraft.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>01 吕敬人书籍设计</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600;900&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600;900&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
assets/style-specimens/east/02-song-block-print.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>02 宋刻本版式</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600&family=Noto+Serif+SC:wght@400;600&family=Noto+Sans+SC:wght@500&display=swa - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600&family=Noto+Serif+SC:wght@400;600&family=Noto+Sans+SC:wght@500&display=swap" rel="stylesheet">
assets/style-specimens/east/03-republic-book-jacket.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>03 民国书衣</title> <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet"> - Network accessline 3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont/style.css">
assets/style-specimens/east/04-shanghai-deco-calendar.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>04 上海摩登装饰艺术</title> <link href="https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@500;700&display=swap" rel - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@500;700&display=swap" rel="stylesheet">
assets/style-specimens/east/05-hanzi-experimental-poster.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>05 中文实验字体海报</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;900&family=Noto+Serif+SC:wght@400;900&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;900&family=Noto+Serif+SC:wght@400;900&display=swap" rel="stylesheet">
assets/style-specimens/east/06-hk-street-signs.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>06 香港街招与招牌</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;900&family=Noto+Serif+TC:wght@900&family=Archivo+Black&display=swap" rel="sty - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;900&family=Noto+Serif+TC:wght@900&family=Archivo+Black&display=swap" rel="stylesheet">
assets/style-specimens/east/07-traditional-colors-solar-terms.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>07 中国传统色·节气色谱</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
assets/style-specimens/east/08-sugiura-info-mandala.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>08 杉浦康平信息曼荼罗</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/east/09-tanaka-geometric-poster.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>09 田中一光几何平面构成</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@600;900&family=Zen+Kaku+Gothic+New:w - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@600;900&family=Zen+Kaku+Gothic+New:wght@500;700&display=swap" rel="stylesheet">
assets/style-specimens/east/10-hattori-playful-offset.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>10 服部一成玩味错位</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500;900&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="styl - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500;900&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
assets/style-specimens/east/11-sato-minimal-symbol.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>11 佐藤可士和极简符号</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;900&family=Archivo:wght@800;900&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;900&family=Archivo:wght@800;900&display=swap" rel="stylesheet">
assets/style-specimens/east/12-japan-magazine-dense.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>12 日式生活杂志密排</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Long+Cang&family=Archivo+Narrow:wght@700&family=Noto+Seri - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Long+Cang&family=Archivo+Narrow:wght@700&family=Noto+Serif+SC:wght@900&display=swap" rel="stylesheet">
assets/style-specimens/info/01-personal-annual-report.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>01 个人数据印刷年报</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" re - Network accessline 3
<title>01 个人数据印刷年报</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <style> - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 62
<script> let s=7;function r(){s=(s*16807)%2147483647;return s/2147483647} const NS='http://www.w3.org/2000/svg'; - Network accessline 63
let s=7;function r(){s=(s*16807)%2147483647;return s/2147483647} const NS='http://www.w3.org/2000/svg'; function el(p,t,a,txt){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);if(txt!=null)e.textContent=txt;p.a - Network accessline 64
const NS='http://www.w3.org/2000/svg';
assets/style-specimens/info/02-explanation-graphics.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>02 解释性图解</title> <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=ZCOOL+KuaiLe&family - Network accessline 3
<title>02 解释性图解</title> <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=ZCOOL+KuaiLe&family=Long+Cang&display=swap" rel="stylesheet"> <styl - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@700;800;900&family=Noto+Sans+SC:wght@500;700;900&family=ZCOOL+KuaiLe&family=Long+Cang&display=swap" rel="stylesheet">
assets/style-specimens/info/03-cross-section-epic.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>03 巨幅剖面手绘</title> <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@400;500;70 - Network accessline 3
<title>03 巨幅剖面手绘</title> <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@400;500;700&family=Inter:wght@500;700&display=swap" rel="s - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Noto+Serif+SC:wght@600;900&family=Noto+Sans+SC:wght@400;500;700&family=Inter:wght@500;700&display=swap" rel="stylesheet"> - Network accessline 39
<div class="scale">0 ——— 10 m 剖面图 A–A′</div> <script> const NS='http://www.w3.org/2000/svg',g=document.getElementById('g'); - Network accessline 40
<script> const NS='http://www.w3.org/2000/svg',g=document.getElementById('g'); function e(t,a,p){const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);(p||g).appendChild(n);return n} - Network accessline 41
const NS='http://www.w3.org/2000/svg',g=document.getElementById('g');
assets/style-specimens/info/04-magazine-pop-data.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>04 杂志撞色数据页</title> <link href="https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:wght@400;500;600&family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&dis - Network accessline 3
<title>04 杂志撞色数据页</title> <link href="https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:wght@400;500;600&family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:wght@400;500;600&family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/info/05-isotype.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>05 ISOTYPE图形统计</title> <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 3
<title>05 ISOTYPE图形统计</title> <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <style> - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/info/06-data-humanism.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>06 数据人文主义手绘图谱</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Long+Cang&family=Inter:wght@500;600 - Network accessline 3
<title>06 数据人文主义手绘图谱</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Long+Cang&family=Inter:wght@500;600&display=swap" rel="stylesheet"> <style> - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Long+Cang&family=Inter:wght@500;600&display=swap" rel="stylesheet"> - Network accessline 32
<div class="src">虚构数据，仅作风格样张。每一个符号是一场谈话，按时间顺序沿着虚线排开。</div> <script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); - Network accessline 33
<script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); function e(t,a,p){const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);(p||svg).appendChild(n);return n} - Network accessline 34
const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s');
assets/style-specimens/info/07-scrollytelling.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>07 滚动叙事数据长卷</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Source+Serif+4:opsz,wght@8..60,500;8..60,700&family=Noto+Sans+SC:wght@400;500; - Network accessline 3
<title>07 滚动叙事数据长卷</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Source+Serif+4:opsz,wght@8..60,500;8..60,700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@500;700&displa - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Source+Serif+4:opsz,wght@8..60,500;8..60,700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@500;700&display=swap" rel="stylesheet"> - Network accessline 33
<svg width="1200" height="750" viewBox="0 0 1200 750" id="s"></svg> <script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); - Network accessline 34
<script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); function e(t,a,txt){const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);if(txt!=null)n.textContent=txt;svg.appendChild(n);return n} - Network accessline 35
const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s');
assets/style-specimens/info/08-cartographic-lead.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>08 地图即主角</title> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=s - Network accessline 3
<title>08 地图即主角</title> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <style> - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 18
<div class="base">底图位：此处应为海岸线与水系底图（需 GeoJSON 或 Toner 瓦片）。当前只画了经纬网与数据层。</div> <script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); - Network accessline 19
<script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); function e(t,a,txt,p){const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);if(txt!=null)n.textContent=txt;(p||svg).appendChild(n);ret - Network accessline 20
const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s');
assets/style-specimens/info/09-newsroom-chart.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>09 数据新闻图表规范</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&displa - Network accessline 3
<title>09 数据新闻图表规范</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> - Network accessline 25
<div class="vv">VISUAL VOCABULARY<br>CHANGE OVER TIME · LINE</div> <script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); - Network accessline 26
<script> const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s'); function e(t,a,txt){const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);if(txt!=null)n.textContent=txt;svg.appendChild(n);return n} - Network accessline 27
const NS='http://www.w3.org/2000/svg',svg=document.getElementById('s');
assets/style-specimens/info/10-computational-portrait.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>10 计算式数据肖像</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Roboto+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500;700&display=s - Network accessline 3
<title>10 计算式数据肖像</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Roboto+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"> <style> - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Roboto+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/info/11-beautiful-information.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>11 美丽信息</title> <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="styleshee - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 23
{n:'海滩与旅游',hue:145,c:[['烟蒂',12],['塑料袋',11],['瓶盖',9],['防晒包装',5],['玩具',4]]}, {n:'航运',hue:275,c:[['货柜落海',15],['船舶生活垃圾',10],['压舱与油漆',8]]}]; const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); - Network accessline 24
{n:'航运',hue:275,c:[['货柜落海',15],['船舶生活垃圾',10],['压舱与油漆',8]]}]; const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); function sq(items,x,y,w,h){ // items:{v}, sorted desc; returns rects - Network accessline 25
const NS='http://www.w3.org/2000/svg',s=document.getElementById('s');
assets/style-specimens/info/12-open-research-data.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>12 学术开放数据</title> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;700&family=Noto+Serif+SC:wght@600;700&family=Noto - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;700&family=Noto+Serif+SC:wght@600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 17
<div class="ft"><div><b>数据来源：</b>市气象局基准站网 (2026)；原始年值，未做平滑<br><b>口径：</b>每站每年 365 天日均温的算术平均，缺测超过 5 天的年份不计</div><div style="text-align:right">授权协议：CC BY 4.0<br>原始 CSV 与口径说明可免费下载</div></div> <script> const NS='http://www.w3.org/2000/svg',s=doc - Network accessline 18
<script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); function el(t,a,p){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);(p||s).appendChild(e);return e} - Network accessline 19
const NS='http://www.w3.org/2000/svg',s=document.getElementById('s');
assets/style-specimens/info/13-speculative-tech-diagram.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>13 东方思辨科技图</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Noto+Serif+SC:w - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Noto+Serif+SC:wght@200;300;400&family=Noto+Sans+SC:wght@300;400&display=swap" rel="stylesheet"> - Network accessline 21
<div class="fn">18:00 — 06:00 · 观星台 海拔 1,120 m</div> <script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); - Network accessline 22
<script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); function el(t,a,p){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);(p||s).appendChild(e);return e} - Network accessline 23
const NS='http://www.w3.org/2000/svg',s=document.getElementById('s');
assets/style-specimens/info/14-pictogram-system.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>14 系统图标化图解</title> <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
assets/style-specimens/info/15-small-multiples.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>15 Tufte小倍数矩阵</title> <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600&family=Inter:wght@400;500&family=Noto+Serif+SC:wght@400;600&family=N - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600&family=Inter:wght@400;500&family=Noto+Serif+SC:wght@400;600&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet"> - Network accessline 13
<svg width="1200" height="750" id="s"></svg> <script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); - Network accessline 14
<script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); function el(t,a,p){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);(p||s).appendChild(e);return e} - Network accessline 15
const NS='http://www.w3.org/2000/svg',s=document.getElementById('s');
assets/style-specimens/info/16-topological-transit-map.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>16 拓扑简化路网图</title> <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 18
<div class="ft">示意图，不按实际里程与方位绘制。换乘信息以站内公示为准。</div> <script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); - Network accessline 19
<script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); function el(t,a,p){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);(p||s).appendChild(e);return e} - Network accessline 20
const NS='http://www.w3.org/2000/svg',s=document.getElementById('s');
assets/style-specimens/info/17-ma-emptiness.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>17 白之留白信息图</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200;300;400&family=Inter:wght@300;400&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200;300;400&family=Inter:wght@300;400&display=swap" rel="stylesheet"> - Network accessline 18
<svg width="1200" height="750"><g id="g"></g></svg> <script> const NS='http://www.w3.org/2000/svg',g=document.getElementById('g'); - Network accessline 19
<script> const NS='http://www.w3.org/2000/svg',g=document.getElementById('g'); function el(t,a){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);g.appendChild(e);return e} - Network accessline 20
const NS='http://www.w3.org/2000/svg',g=document.getElementById('g');
assets/style-specimens/info/18-bookcraft-data.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>18 书籍级信息排印</title> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,700;9..144,900&family=EB+Garamond:wght@400;500&family=Archivo: - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,700;9..144,900&family=EB+Garamond:wght@400;500&family=Archivo:wght@400;700&family=Noto+Serif+SC:wght@400;700;900&display=swap" rel="stylesheet">
assets/style-specimens/info/19-scientific-figure-plate.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>19 科学期刊图版</title> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Roboto+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700& - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&family=Roboto+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> - Network accessline 14
<div class="cap"><b>图 2 烘焙终温对杯测评分的影响。</b><b>a</b>，不同烘焙终温下的杯测总分（SCA 100 分制），两种豆源分别以蓝色（埃塞俄比亚）和橙色（哥伦比亚）表示。<b>b</b>，终温 210 ℃ 时三种浅烘处理的滴定酸度，*P < 0.05（双侧 t 检验，Bonferroni 校正）。<b>c</b>，同一批次 60 锅的烘焙失重与杯测总分的关系，虚线为线性拟合（r = −0.41）。数据均为平均值 ± 标准误，每组 n - Network accessline 15
<script> const NS='http://www.w3.org/2000/svg',s=document.getElementById('s'); function el(t,a,p){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);(p||s).appendChild(e);return e} - Network accessline 16
const NS='http://www.w3.org/2000/svg',s=document.getElementById('s');
assets/style-specimens/info/20-swiss-grid-report.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>20 瑞士网格年报</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&disp - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700;800&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/01-neo-swiss-billboard.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>01 新瑞士大字报</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700;900&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;900&display=s - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700;900&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/02-black-big-number-stage.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>02 黑底巨型数字剧场</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
assets/style-specimens/ppt/03-mono-brand-type-hero.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>03 高饱和单色品牌撞色海报</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;800;900&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;800;900&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/04-full-bleed-gradient-manifesto.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>04 全幅渐变宣言版式</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;800;900&family=Anton&family=Noto+Sans+SC:wght@500;900&display=swap" rel="styleshe - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;800;900&family=Anton&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/05-candy-lecture-stage.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>05 CS50单概念糖果舞台</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@900&display=swap" re - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/06-playful-collins-editorial.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>06 玩味手绘极简</title> <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,700..900,100&family=Noto+Serif+SC:wght@500;900&family=Inter:wght@500; - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,700..900,100&family=Noto+Serif+SC:wght@500;900&family=Inter:wght@500;700&display=swap" rel="stylesheet">
assets/style-specimens/ppt/07-irreverent-pop.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>07 不羁玩梗流行版</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;800;900&family=Space+Grotesk:wght@500;700&family=Noto+Sans+SC:wght@500;900&display - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;800;900&family=Space+Grotesk:wght@500;700&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/08-y2k-inflated-wrapped.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>08 Y2K膨胀大字</title> <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Anton&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Anton&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/09-bento-grid.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>09 Bento便当格模块网格</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900 - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/ppt/10-dark-hairline-terminal.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>10 Neo-Swiss暗色终端美学</title> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;50 - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
assets/style-specimens/ppt/11-two-font-consulting.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>11 双字体咨询版</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Fraunces - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap">
assets/style-specimens/ppt/12-diagram-isotype.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>12 图谱箭头企业版</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=IBM+Plex+Sans:wght@400;500;600;700&displa - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
assets/style-specimens/ppt/13-diagrammatic-minimalism.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>13 单图母图概念图解</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Jost:wght@400;500;600;700&display=swap"> - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Jost:wght@400;500;600;700&display=swap">
assets/style-specimens/ppt/14-narrative-sparkline.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>14 Sparkline叙事波形</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Inter:wght@400;600;700&family=Geist - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Inter:wght@400;600;700&family=Geist+Mono:wght@500&display=swap">
assets/style-specimens/ppt/15-assertion-evidence.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>15 断言-证据 Tufte信息设计</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700&family=Noto+Sans+SC:wght@400;500&family=Source+ - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700&family=Noto+Sans+SC:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Inter:wght@400;500&display=swap">
assets/style-specimens/ppt/16-institutional-swiss.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>16 瑞士机构极简</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Inter:wght@400;500;600;700&display=swap"> - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Inter:wght@400;500;600;700&display=swap">
assets/style-specimens/ppt/17-editorial-longform.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>17 杂志编辑长文流</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=New - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Inter:wght@400;500;600&display=sw
assets/style-specimens/ppt/18-humanist-rounded-cards.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>18 人文圆角卡片</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Source+S - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Nunito+Sans:wght@400;600;700;800&display=sw
assets/style-specimens/ppt/19-dense-research-report.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>19 研报密集图表</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Inter:wght@400;500;600;700&family=Geist+Mo - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@500;600&display=swap">
assets/style-specimens/ppt/20-all-text-manifesto.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>20 纯文字宣言备忘录</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Ne - Network accessline 2
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;500;700&family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap">
assets/style-specimens/web/01-editorial-brutalism.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>01 媒体级粗野主义</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&family=Geist+Mono:wght@400;600& - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&family=Geist+Mono:wght@400;600&display=swap" rel="stylesheet">
assets/style-specimens/web/02-neo-brutalism.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>02 新粗野主义撞色信息流</title> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Fraunces:wght@400;600&family=Noto+Sans+SC:wght@500;900&family= - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Fraunces:wght@400;600&family=Noto+Sans+SC:wght@500;900&family=Noto+Serif+SC:wght@500;700&display=swap" rel="stylesheet">
assets/style-specimens/web/03-memphis-maximalism.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>03 孟菲斯复古拼贴最大化</title> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Bungee&family=Space+Mono:wght@400;700&family=Noto+Serif+SC:wght@700;900& - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Bungee&family=Space+Mono:wght@400;700&family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet">
assets/style-specimens/web/04-friendly-candy.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>04 糖果色凸起立体按钮游戏化</title> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Baloo+2:wght@700;800&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wg - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Baloo+2:wght@700;800&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/web/05-pure-css-art.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>05 纯CSS几何插画与响应式变形</title> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;900&family=Archivo:wght@700;900&family=Noto+Sans+SC:wght@500;900&display= - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;900&family=Archivo:wght@700;900&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet">
assets/style-specimens/web/06-bold-big-type.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>06 巨型字黑白时装大字报</title> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wdth,wght@100,500;125,800&family=Playfair+Display:ital,wght@0,900;1,700&fam - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wdth,wght@100,500;125,800&family=Playfair+Display:ital,wght@0,900;1,700&family=Noto+Serif+SC:wght@900&family=Noto+Sans+SC:wght@500;700&display=swap" rel="stylesheet">
assets/style-specimens/web/07-cosmic-retro-futurism.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>07 复古未来太空图录</title> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500&family=Space+Mono:wght@400;700&family=Noto+Serif+SC - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,700;1,500&family=Space+Mono:wght@400;700&family=Noto+Serif+SC:wght@500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/web/08-cinematic-sound-viz.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>08 电影感声波可视化</title> <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;600;800&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@300;500;900&display=swap" - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;600;800&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@300;500;900&display=swap" rel="stylesheet">
assets/style-specimens/web/09-pixel-side-scroller.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>09 像素游戏横版叙事</title> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet"> - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Noto+Sans+SC:wght@500;900&display=swap" rel="stylesheet">
assets/style-specimens/web/10-bauhaus-geometric.html
- Network accessline 1
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><title>10 包豪斯几何标志与扁平插画</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;800&family=Manrope:wght@500;800&family=Noto+Sans+SC:wght@500;700;900&disp - Network accessline 2
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;800&family=Manrope:wght@500;800&family=Noto+Sans+SC:wght@500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/web/11-dark-editorial.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>11 暗色双色侧栏开发者作品集</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+S - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>11 暗色双色侧栏开发者作品集</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;7 - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap">
assets/style-specimens/web/12-warm-editorial.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>12 暖色出版物</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@40 - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>12 暖色出版物</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@400;500&displa
assets/style-specimens/web/13-glassmorphism-bento.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>13 Linear暗色发光Bento网格</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+S - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>13 Linear暗色发光Bento网格</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400; - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap">
assets/style-specimens/web/14-angled-fluid-gradient.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>14 斜切流体渐变带</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display= - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>14 斜切流体渐变带</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap"> <style> - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap">
assets/style-specimens/web/15-utility-colorful-docs.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>15 实用主义彩虹分类文档</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>15 实用主义彩虹分类文档</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500 - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap">
assets/style-specimens/web/16-terminal-core.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>16 终端核软未来</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>16 终端核软未来</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&dis - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap">
assets/style-specimens/web/17-functional-brutalism.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>17 功能主义网格社区</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>17 功能主义网格社区</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap"> <style> - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap">
assets/style-specimens/web/18-gallery-dark.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>18 深色画廊裱框</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Noto+San - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>18 深色画廊裱框</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Noto+Sans+SC:wght@300;40 - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Noto+Sans+SC:wght@300;400&display=swap">
assets/style-specimens/web/19-swiss-monochrome.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>19 Swiss极致黑白</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:w - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>19 Swiss极致黑白</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700& - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap">
assets/style-specimens/web/20-kenya-hara-white-gallery.html
- Network accessline 1
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><title>20 日式留白白盒画廊</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Noto+Sans+SC:wght@300;400&display=swap"> - Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"><title>20 日式留白白盒画廊</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Noto+Sans+SC:wght@300;400&display=swap"> <style> - Network accessline 3
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Noto+Sans+SC:wght@300;400&display=swap">
assets/style-specimens/xhs/01-specimen-journal.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>01 标本志：博物馆图版</title> <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;70 - Network accessline 3
<title>01 标本志：博物馆图版</title> <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;700;900&display=swap" rel="stylesheet"> <link rel= - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/xhs/02-sticker-notebook.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>02 贴纸本：产品自己的纸面</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 3
<title>02 贴纸本：产品自己的纸面</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="_kit/xhs.css"><script src= - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/xhs/03-index-ink.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>03 索引：墨底黄数字</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 3
<title>03 索引：墨底黄数字</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="_kit/xhs.css"><script src="_k - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/xhs/04-panorama-strip.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>04 长卷：滑动时连成一幅</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 3
<title>04 长卷：滑动时连成一幅</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="_kit/xhs.css"><script src=" - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/xhs/05-daily-paper.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>05 日报：报纸头版</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;700;900&family=Bodoni+Moda:opsz,wght@6..96,500;6..96, - Network accessline 3
<title>05 日报：报纸头版</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;700;900&family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&display=swap" rel="stylesheet"> <link rel="s - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@500;700;900&family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700&display=swap" rel="stylesheet"> - Network accessline 7
/* 日报：新闻纸底色＋噪点、宋体刊头双线、头条、分栏正文与首字下沉、灰度网点图。适合「事件」型内容：发布、复盘、深度方法稿。 */ :root{--paper:#F2EDE1;--ink:#1D1B18} .news{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' heigh - Network accessline 8
:root{--paper:#F2EDE1;--ink:#1D1B18} .news{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' ba - Network accessline 9
.news{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitc
assets/style-specimens/xhs/06-trading-cards.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>06 集换卡：一项一卡</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 3
<title>06 集换卡：一项一卡</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="_kit/xhs.css"><script src="_k - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/xhs/07-blank-vertical.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>07 留白：竖排与印章</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Bodoni+Moda:ital,opsz,wght@0,6..96,500;1,6..96,500&display=swap" rel="styl - Network accessline 3
<title>07 留白：竖排与印章</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Bodoni+Moda:ital,opsz,wght@0,6..96,500;1,6..96,500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="_kit/xhs.c - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Bodoni+Moda:ital,opsz,wght@0,6..96,500;1,6..96,500&display=swap" rel="stylesheet">
assets/style-specimens/xhs/08-area-infographic.html
- Network accessline 2
<html lang="zh-CN"><head><meta charset="utf-8"> <title>08 信息图：面积即数量</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> - Network accessline 3
<title>08 信息图：面积即数量</title> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="_kit/xhs.css"><script src="_ - Network accessline 4
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@500;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
assets/style-specimens/xhs/_kit/README.md
- Network accessline 3
- `xhs.css`：页面盒子（1242×1660）、两种打开方式（1200×750 视口时缩成样张；其余宽度按真实尺寸排，给 `scripts/xhs_render.py` 切图）、纸面点阵、贴纸投影、字号底线变量。 - `xhs.js`：页码、`straddle()` 跨缝摆放、`wire()`/`perch()` 连续长卷的电线与站鸟。 - `stickers/`：样张用的鸟类贴纸缩略图，来自 [huashu-bird-sticker](https://github. - Network accessline 4
- `xhs.js`：页码、`straddle()` 跨缝摆放、`wire()`/`perch()` 连续长卷的电线与站鸟。 - `stickers/`：样张用的鸟类贴纸缩略图，来自 [huashu-bird-sticker](https://github.com/alchaincyf/huashu-bird-sticker)，许可是 **PolyForm Shield 1.0.0**（条款：https://polyformproject.org/licenses/shiel - Network accessline 5
- `stickers/`：样张用的鸟类贴纸缩略图，来自 [huashu-bird-sticker](https://github.com/alchaincyf/huashu-bird-sticker)，许可是 **PolyForm Shield 1.0.0**（条款：https://polyformproject.org/licenses/shield/1.0.0 ），和本仓库的 MIT 不同，见 `stickers/LICENSE.md`。只为演示版式；你的作品请换成自己
assets/style-specimens/xhs/_kit/birds.js
- Executable scriptline 1
Executable file - Possible obfuscationline 2
window.BIRDS={"Trichoglossus_moluccanus": {"zh": "彩虹吸蜜鹦鹉", "sci": "Trichoglossus moluccanus", "w": 520, "h": 451, "score": 85, "mass": 113.3, "wing": 142.8, "iucn": "LC", "seq": 4429}, "Cacatua_galerita": {"zh": "葵花鹦鹉", "sci": "Cacatua gale
assets/style-specimens/xhs/_kit/stickers/LICENSE.md
- Network accessline 1
本文件夹里的贴纸图片来自 https://github.com/alchaincyf/huashu-bird-sticker ，按 PolyForm Shield License 1.0.0 授权，不适用本仓库的 MIT 协议。 - Network accessline 3
条款全文：https://polyformproject.org/licenses/shield/1.0.0 - Network accessline 5
Required Notice: Copyright (c) 2026 Huashu (alchaincyf), https://github.com/alchaincyf/huashu-bird-sticker
assets/style-specimens/xhs/_kit/xhs.js
- Executable scriptline 1
Executable file
demos/c1-ios-prototype-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>huashu-design V2 · c1-ios-prototype · EN</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>huashu-design V2 · c1-ios-prototype · EN</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400; - Network accessline 51
content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctav - Network accessline 52
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTile - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='
demos/c1-ios-prototype.html
- Network accessline 4
<meta charset="utf-8" /> <title>huashu-design V2 · c1-ios-prototype · 中文版</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>huashu-design V2 · c1-ios-prototype · 中文版</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400; - Network accessline 51
content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctav - Network accessline 52
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTile - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='
demos/c2-slides-pptx-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>c2-slides-pptx · English · v2</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c2-slides-pptx · English · v2</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400; - Network accessline 52
content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOcta - Network accessline 53
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTil - Network accessline 54
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values
demos/c2-slides-pptx.html
- Network accessline 4
<meta charset="utf-8" /> <title>c2-slides-pptx · 中文版 · v2</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c2-slides-pptx · 中文版 · v2</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400; - Network accessline 52
content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOcta - Network accessline 53
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTil - Network accessline 54
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values
demos/c3-motion-design-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>huashu-design · c3 motion design (EN)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>huashu-design · c3 motion design (EN)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 51
pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width= - Network accessline 52
opacity: 0.025; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' fil - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/><
demos/c3-motion-design.html
- Network accessline 4
<meta charset="utf-8" /> <title>huashu-design · c3 motion design（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>huashu-design · c3 motion design（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 51
pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width= - Network accessline 52
opacity: 0.025; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' fil - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/><
demos/c4-tweaks-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>c4-tweaks · Slide. See it morph. (English)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c4-tweaks · Slide. See it morph. (English)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 618
<!-- Cursor --> <div class="cursor" id="cursor"> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> - Network accessline 619
<div class="cursor" id="cursor"> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M2 2 L2 16 L6 12 L9 18 L11 17 L8 11 L14 11 Z" - Network accessline 620
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
demos/c4-tweaks.html
- Network accessline 4
<meta charset="utf-8" /> <title>c4-tweaks · 拨动即所得（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c4-tweaks · 拨动即所得（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 618
<!-- Cursor --> <div class="cursor" id="cursor"> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> - Network accessline 619
<div class="cursor" id="cursor"> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M2 2 L2 16 L6 12 L9 18 L11 17 L8 11 L14 11 Z" - Network accessline 620
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
demos/c5-infographic-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>c5-infographic · Data → Typography (EN)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c5-infographic · Data → Typography (EN)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;
demos/c5-infographic.html
- Network accessline 4
<meta charset="utf-8" /> <title>c5-infographic · 数据 → 印刷级排版（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c5-infographic · 数据 → 印刷级排版（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;
demos/c6-expert-review-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>c6 · Five Axes · One Punch List</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c6 · Five Axes · One Punch List</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 51
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></fil - Network accessline 52
inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%2 - Network accessline 559
<div class="radar-title" id="radarTitle">Five-Axis Diagnosis · Radar</div> <div class="radar-wrap" id="radarWrap"> <svg viewBox="-270 -270 540 540" xmlns="http://www.w3.org/2000/svg"> - Network accessline 560
<div class="radar-wrap" id="radarWrap"> <svg viewBox="-270 -270 540 540" xmlns="http://www.w3.org/2000/svg"> <!-- Grid rings (5 levels) --> - Network accessline 561
<svg viewBox="-270 -270 540 540" xmlns="http://www.w3.org/2000/svg"> - Network accessline 662
pts.push(`${x.toFixed(2)},${y.toFixed(2)}`); } const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); - Network accessline 663
} const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); poly.setAttribute('points', pts.join(' ')); - Network accessline 664
const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); - Network accessline 674
for (let i = 0; i < N; i++) { const [x, y] = axisPoint(i, RADIUS); const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - Network accessline 675
const [x, y] = axisPoint(i, RADIUS); const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.setAttribute('x1', 0); - Network accessline 676
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - Network accessline 701
// Title Case serif italic label (only one per axis in EN) const zhText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - Network accessline 702
const zhText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - Network accessline 713
const pointsG = document.getElementById('radarPoints'); const pointEls = AXES.map((axis, i) => { const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - Network accessline 714
const pointEls = AXES.map((axis, i) => { const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', 0); - Network accessline 715
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
demos/c6-expert-review.html
- Network accessline 4
<meta charset="utf-8" /> <title>c6 · 五个维度，给你一份手术单</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>c6 · 五个维度，给你一份手术单</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 51
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></fil - Network accessline 52
inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%2 - Network accessline 556
<div class="radar-title" id="radarTitle">五维诊断 · RADAR</div> <div class="radar-wrap" id="radarWrap"> <svg viewBox="-270 -270 540 540" xmlns="http://www.w3.org/2000/svg"> - Network accessline 557
<div class="radar-wrap" id="radarWrap"> <svg viewBox="-270 -270 540 540" xmlns="http://www.w3.org/2000/svg"> <!-- Grid rings (5 levels) --> - Network accessline 558
<svg viewBox="-270 -270 540 540" xmlns="http://www.w3.org/2000/svg"> - Network accessline 659
pts.push(`${x.toFixed(2)},${y.toFixed(2)}`); } const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); - Network accessline 660
} const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); poly.setAttribute('points', pts.join(' ')); - Network accessline 661
const poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon'); - Network accessline 671
for (let i = 0; i < N; i++) { const [x, y] = axisPoint(i, RADIUS); const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - Network accessline 672
const [x, y] = axisPoint(i, RADIUS); const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.setAttribute('x1', 0); - Network accessline 673
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); - Network accessline 698
// ZH label const zhText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - Network accessline 699
const zhText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - Network accessline 708
// EN label stacks vertically below ZH (always +22px in y) const enText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - Network accessline 709
const enText = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - Network accessline 722
const pointsG = document.getElementById('radarPoints'); const pointEls = AXES.map((axis, i) => { const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - Network accessline 723
const pointEls = AXES.map((axis, i) => { const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', 0); - Network accessline 724
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
demos/hero-animation-v10-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>Huashu Design · Here's to the Agents (v10)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>Huashu Design · Here's to the Agents (v10)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;
demos/md-html-narration/md-html-demo.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>md还是html，这是个蠢问题 · 解说 demo (v3 · 字幕+持续运动+修溢出)</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> - Network accessline 6
<title>md还是html，这是个蠢问题 · 解说 demo (v3 · 字幕+持续运动+修溢出)</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"> - Network accessline 7
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> - Network accessline 8
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> - Network accessline 9
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> - Network accessline 10
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 11
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 12
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@300;400;600;700;800&family=Noto+Serif+SC:wght@400;600;700;900&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="styles
demos/voiceover-demo/什么是token.html
- Network accessline 5
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>什么是 token · narration demo</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> - Network accessline 6
<title>什么是 token · narration demo</title> <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> - Network accessline 7
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> - Network accessline 8
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> - Network accessline 9
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
demos/w1-brand-protocol-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>w1 · Brand Protocol · Five steps, no skipping</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>w1 · Brand Protocol · Five steps, no skipping</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 51
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></fil - Network accessline 52
inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%2
demos/w1-brand-protocol.html
- Network accessline 4
<meta charset="utf-8" /> <title>w1 · 品牌协议 · 五步不能跳</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>w1 · 品牌协议 · 五步不能跳</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 51
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></fil - Network accessline 52
inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' - Network accessline 53
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%2
demos/w2-junior-designer-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>w2 · Rough draft now beats perfect draft later</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>w2 · Rough draft now beats perfect draft later</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 54
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></fil - Network accessline 55
inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' - Network accessline 56
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%2
demos/w2-junior-designer.html
- Network accessline 4
<meta charset="utf-8" /> <title>w2 · 粗糙的第一版，好过完美的大招</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>w2 · 粗糙的第一版，好过完美的大招</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@ - Network accessline 54
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></fil - Network accessline 55
inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' - Network accessline 56
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%2
demos/w3-fallback-advisor-en.html
- Network accessline 4
<meta charset="utf-8" /> <title>w3 · Fallback Advisor (English)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>w3 · Fallback Advisor (English)</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
demos/w3-fallback-advisor.html
- Network accessline 4
<meta charset="utf-8" /> <title>w3 · Fallback Advisor（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 5
<title>w3 · Fallback Advisor（中文版）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 6
<link rel="preconnect" href="https://fonts.googleapis.com"> - Network accessline 7
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - Network accessline 8
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="styles
package-lock.json
- Network accessline 14
"node_modules/@emnapi/runtime": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz", - Network accessline 15
"version": "1.10.0", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz", "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==", - Network accessline 16
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz", - Network accessline 24
"node_modules/@emnapi/runtime/node_modules/tslib": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", - Network accessline 25
"version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - Network accessline 26
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", - Network accessline 31
"node_modules/@img/colour": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", - Network accessline 32
"version": "1.1.0", "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==", - Network accessline 33
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", - Network accessline 40
"node_modules/@img/sharp-darwin-arm64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz", - Network accessline 41
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz", "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w== - Network accessline 42
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz", - Network accessline 54
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 55
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 56
"url": "https://opencollective.com/libvips" - Network accessline 62
"node_modules/@img/sharp-darwin-x64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz", - Network accessline 63
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz", "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==", - Network accessline 64
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz", - Network accessline 76
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 77
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 78
"url": "https://opencollective.com/libvips" - Network accessline 84
"node_modules/@img/sharp-libvips-darwin-arm64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz", - Network accessline 85
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz", "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCv - Network accessline 86
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz", - Network accessline 95
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 96
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 97
"url": "https://opencollective.com/libvips" - Network accessline 100
"node_modules/@img/sharp-libvips-darwin-x64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz", - Network accessline 101
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz", "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdj - Network accessline 102
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz", - Network accessline 111
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 112
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 113
"url": "https://opencollective.com/libvips" - Network accessline 116
"node_modules/@img/sharp-libvips-linux-arm": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz", - Network accessline 117
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz", "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11 - Network accessline 118
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz", - Network accessline 130
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 131
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 132
"url": "https://opencollective.com/libvips" - Network accessline 135
"node_modules/@img/sharp-libvips-linux-arm64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz", - Network accessline 136
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz", "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28 - Network accessline 137
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz", - Network accessline 149
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 150
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 151
"url": "https://opencollective.com/libvips" - Network accessline 154
"node_modules/@img/sharp-libvips-linux-ppc64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz", - Network accessline 155
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz", "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQ - Network accessline 156
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz", - Network accessline 168
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 169
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 170
"url": "https://opencollective.com/libvips" - Network accessline 173
"node_modules/@img/sharp-libvips-linux-riscv64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz", - Network accessline 174
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz", "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNb - Network accessline 175
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz", - Network accessline 187
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 188
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 189
"url": "https://opencollective.com/libvips" - Network accessline 192
"node_modules/@img/sharp-libvips-linux-s390x": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz", - Network accessline 193
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz", "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdw - Network accessline 194
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz", - Network accessline 206
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 207
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 208
"url": "https://opencollective.com/libvips" - Network accessline 211
"node_modules/@img/sharp-libvips-linux-x64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz", - Network accessline 212
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz", "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfA - Network accessline 213
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz", - Network accessline 225
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 226
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 227
"url": "https://opencollective.com/libvips" - Network accessline 230
"node_modules/@img/sharp-libvips-linuxmusl-arm64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz", - Network accessline 231
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz", "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0p - Network accessline 232
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz", - Network accessline 244
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 245
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 246
"url": "https://opencollective.com/libvips" - Network accessline 249
"node_modules/@img/sharp-libvips-linuxmusl-x64": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz", - Network accessline 250
"version": "1.2.4", "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz", "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCyl - Network accessline 251
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz", - Network accessline 263
], "funding": { "url": "https://opencollective.com/libvips" - Network accessline 264
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 265
"url": "https://opencollective.com/libvips" - Network accessline 268
"node_modules/@img/sharp-linux-arm": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz", - Network accessline 269
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz", "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==", - Network accessline 270
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz", - Network accessline 285
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 286
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 287
"url": "https://opencollective.com/libvips" - Network accessline 293
"node_modules/@img/sharp-linux-arm64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz", - Network accessline 294
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz", "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==", - Network accessline 295
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz", - Network accessline 310
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 311
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 312
"url": "https://opencollective.com/libvips" - Network accessline 318
"node_modules/@img/sharp-linux-ppc64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz", - Network accessline 319
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz", "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==", - Network accessline 320
"resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz", - Network accessline 335
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 336
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 337
"url": "https://opencollective.com/libvips" - Network accessline 343
"node_modules/@img/sharp-linux-riscv64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz", - Network accessline 344
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz", "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw - Network accessline 345
"resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz", - Network accessline 360
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 361
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 362
"url": "https://opencollective.com/libvips" - Network accessline 368
"node_modules/@img/sharp-linux-s390x": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz", - Network accessline 369
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz", "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==", - Network accessline 370
"resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz", - Network accessline 385
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 386
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 387
"url": "https://opencollective.com/libvips" - Network accessline 393
"node_modules/@img/sharp-linux-x64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz", - Network accessline 394
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz", "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==", - Network accessline 395
"resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz", - Network accessline 410
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 411
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 412
"url": "https://opencollective.com/libvips" - Network accessline 418
"node_modules/@img/sharp-linuxmusl-arm64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz", - Network accessline 419
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz", "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id - Network accessline 420
"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz", - Network accessline 435
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 436
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 437
"url": "https://opencollective.com/libvips" - Network accessline 443
"node_modules/@img/sharp-linuxmusl-x64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz", - Network accessline 444
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz", "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q - Network accessline 445
"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz", - Network accessline 460
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 461
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 462
"url": "https://opencollective.com/libvips" - Network accessline 468
"node_modules/@img/sharp-wasm32": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz", - Network accessline 469
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz", "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==", - Network accessline 470
"resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz", - Network accessline 482
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 483
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 484
"url": "https://opencollective.com/libvips" - Network accessline 487
"node_modules/@img/sharp-win32-arm64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz", - Network accessline 488
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz", "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==", - Network accessline 489
"resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz", - Network accessline 501
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 502
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 503
"url": "https://opencollective.com/libvips" - Network accessline 506
"node_modules/@img/sharp-win32-ia32": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz", - Network accessline 507
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz", "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==", - Network accessline 508
"resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz", - Network accessline 520
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 521
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 522
"url": "https://opencollective.com/libvips" - Network accessline 525
"node_modules/@img/sharp-win32-x64": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", - Network accessline 526
"version": "0.34.5", "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==", - Network accessline 527
"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz", - Network accessline 539
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 540
"funding": { "url": "https://opencollective.com/libvips" } - Network accessline 541
"url": "https://opencollective.com/libvips" - Network accessline 544
"node_modules/@pdf-lib/standard-fonts": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz", - Network accessline 545
"version": "1.0.0", "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz", "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==", - Network accessline 546
"resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz", - Network accessline 553
"node_modules/@pdf-lib/upng": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz", - Network accessline 554
"version": "1.0.1", "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz", "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==", - Network accessline 555
"resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz", - Network accessline 562
"node_modules/@types/node": { "version": "22.19.19", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.19.tgz", - Network accessline 563
"version": "22.19.19", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.19.tgz", "integrity": "sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew==", - Network accessline 564
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.19.tgz", - Network accessline 571
"node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", - Network accessline 572
"version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==", - Network accessline 573
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", - Network accessline 577
"node_modules/detect-libc": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", - Network accessline 578
"version": "2.1.2", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", - Network accessline 579
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", - Network accessline 586
"node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - Network accessline 587
"version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - Network accessline 588
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - Network accessline 600
"node_modules/https": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz", - Network accessline 601
"version": "1.0.0", "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz", "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg==", - Network accessline 602
"resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz", - Network accessline 606
"node_modules/image-size": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz", - Network accessline 607
"version": "1.2.1", "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz", "integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==", - Network accessline 608
"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz", - Network accessline 621
"node_modules/immediate": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", - Network accessline 622
"version": "3.0.6", "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==", - Network accessline 623
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", - Network accessline 627
"node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - Network accessline 628
"version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - Network accessline 629
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - Network accessline 633
"node_modules/isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - Network accessline 634
"version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", - Network accessline 635
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - Network accessline 639
"node_modules/jszip": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", - Network accessline 640
"version": "3.10.1", "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==", - Network accessline 641
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz", - Network accessline 651
"node_modules/lie": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", - Network accessline 652
"version": "3.3.0", "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==", - Network accessline 653
"resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", - Network accessline 660
"node_modules/pako": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", - Network accessline 661
"version": "1.0.11", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", - Network accessline 662
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", - Network accessline 666
"node_modules/pdf-lib": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz", - Network accessline 667
"version": "1.17.1", "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz", "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==", - Network accessline 668
"resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz", - Network accessline 678
"node_modules/playwright": { "version": "1.59.1", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz", - Network accessline 679
"version": "1.59.1", "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz", "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==", - Network accessline 680
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz", - Network accessline 696
"node_modules/playwright-core": { "version": "1.59.1", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz", - Network accessline 697
"version": "1.59.1", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz", "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==", - Network accessline 698
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz", - Network accessline 708
"node_modules/pptxgenjs": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/pptxgenjs/-/pptxgenjs-4.0.1.tgz", - Network accessline 709
"version": "4.0.1", "resolved": "https://registry.npmjs.org/pptxgenjs/-/pptxgenjs-4.0.1.tgz", "integrity": "sha512-TeJISr8wouAuXw4C1F/mC33xbZs/FuEG6nH9FG1Zj+nuPcGMP5YRHl6X+j3HSUnS1f3at6k75ZZXPMZlA5Lj9A==", - Network accessline 710
"resolved": "https://registry.npmjs.org/pptxgenjs/-/pptxgenjs-4.0.1.tgz", - Network accessline 720
"node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - Network accessline 721
"version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", - Network accessline 722
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - Network accessline 726
"node_modules/queue": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", - Network accessline 727
"version": "6.0.2", "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", - Network accessline 728
"resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", - Network accessline 735
"node_modules/readable-stream": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", - Network accessline 736
"version": "2.3.8", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", - Network accessline 737
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", - Network accessline 750
"node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - Network accessline 751
"version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - Network accessline 752
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - Network accessline 756
"node_modules/semver": { "version": "7.8.2", "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.2.tgz", - Network accessline 757
"version": "7.8.2", "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.2.tgz", "integrity": "sha512-c8jsqUZm3omBOI66G90z1Dyw5z622G8oLG+omfsHBJf3CWQTlOcwOjvOG6wtiNfW6anKm/eA39LMwMtMez2TiQ==", - Network accessline 758
"resolved": "https://registry.npmjs.org/semver/-/semver-7.8.2.tgz", - Network accessline 768
"node_modules/setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - Network accessline 769
"version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==", - Network accessline 770
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - Network accessline 774
"node_modules/sharp": { "version": "0.34.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", - Network accessline 775
"version": "0.34.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==", - Network accessline 776
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz", - Network accessline 787
}, "funding": { "url": "https://opencollective.com/libvips" - Network accessline 788
"funding": { "url": "https://opencollective.com/libvips" }, - Network accessline 789
"url": "https://opencollective.com/libvips" - Network accessline 818
"node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - Network accessline 819
"version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - Network accessline 820
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - Network accessline 827
"node_modules/tslib": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - Network accessline 828
"version": "1.14.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", - Network accessline 829
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - Network accessline 833
"node_modules/undici-types": { "version": "6.21.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", - Network accessline 834
"version": "6.21.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==", - Network accessline 835
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz", - Network accessline 839
"node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - Network accessline 840
"version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - Network accessline 841
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
package.json
- Executable scriptline 1
Executable file
references/about-author.md
- Network accessline 3
> 本文件由 [huashu-skills](https://github.com/alchaincyf/huashu-skills) 根据花叔的 GitHub 主页自动生成。供 agent 在用户问到作者、相关作品或联系方式时读取；正常任务中不主动介绍。 - Network accessline 7
主页：https://github.com/alchaincyf - Network accessline 11
- **huashu-art-motion：让画动起来**：https://github.com/alchaincyf/huashu-art-motion - Network accessline 13
[看动画样片](https://github.com/alchaincyf/huashu-art-motion#动画样片) · [开始使用](https://github.com/alchaincyf/huashu-art-motion#里面有什么) · [下载完整成片](https://github.com/alchaincyf/huashu-art-motion/releases/latest) - Network accessline 17
- **女娲.skill：把高手的思维，变成你的工具**：https://github.com/alchaincyf/nuwa-skill - Network accessline 18
提炼一个人的心智模型、决策方法和表达方式，变成可以反复调用的Skill。 也可以直接试试：[乔布斯视角](https://github.com/alchaincyf/steve-jobs-skill) · [X运营](https://github.com/alchaincyf/x-mentor-skill) - **Huashu Design：把想法做成作品**：https://github.com/alchaincyf/huashu-design - Network accessline 19
也可以直接试试：[乔布斯视角](https://github.com/alchaincyf/steve-jobs-skill) · [X运营](https://github.com/alchaincyf/x-mentor-skill) - Network accessline 20
- **Huashu Design：把想法做成作品**：https://github.com/alchaincyf/huashu-design - Network accessline 21
用HTML做原型、幻灯片、动画和信息图，从定方向到检查成品。 - **FanBox：Coding Agent的驾驶舱**：https://github.com/alchaincyf/fanbox 把文件、终端和每一次改动放在一起，看清Agent做了什么，随时接手。 - Network accessline 22
- **FanBox：Coding Agent的驾驶舱**：https://github.com/alchaincyf/fanbox - Network accessline 27
- **达尔文.skill：让Skill在实测中进化**：https://github.com/alchaincyf/darwin-skill - Network accessline 28
评估、改进、测试，保留有效改动，回滚退步。女娲造Skill，达尔文磨Skill。 - **huashu-chrome：让Agent用上你的浏览器**：https://github.com/alchaincyf/huashu-chrome 使用你自己的Chrome和已有登录态操作网页，把站点经验留下来。 - Network accessline 29
- **huashu-chrome：让Agent用上你的浏览器**：https://github.com/alchaincyf/huashu-chrome - Network accessline 30
使用你自己的Chrome和已有登录态操作网页，把站点经验留下来。 - **huashu-mac-use：让Agent操作Mac原生应用**：https://github.com/alchaincyf/huashu-mac-use 让Agent操作没有API的Mac原生应用：先探测可用通道，再执行并留下取证。 - Network accessline 31
- **huashu-mac-use：让Agent操作Mac原生应用**：https://github.com/alchaincyf/huashu-mac-use - Network accessline 36
- **橙皮书：从真实项目里长出来的AI指南**：https://bookai.top - Network accessline 38
[阅读橙皮书](https://bookai.top) · [Claude Code](https://github.com/alchaincyf/claude-code-orange-book) · [Hermes Agent](https://github.com/alchaincyf/hermes-agent-orange-book) · [Obsidian AI](https://github.com/alchaincyf/obsidian-ai-orange-boo - Network accessline 42
完整目录、安装方法和机器可读的 skills.json：https://github.com/alchaincyf/huashu-skills - Network accessline 44
| skill | 适合什么需求 | 仓库 | |---|---|---| | huashu-design | HTML 原生设计系统：高保真原型/幻灯片/动画/可视化，20 种设计哲学 + 5 维专家评审 + MP4 导出 | https://github.com/alchaincyf/huashu-design | - Network accessline 45
|---|---|---| | huashu-design | HTML 原生设计系统：高保真原型/幻灯片/动画/可视化，20 种设计哲学 + 5 维专家评审 + MP4 导出 | https://github.com/alchaincyf/huashu-design | | huashu-mac-use | 让 agent 操控 Mac 上没有 API 的原生 app：探测选层（CDP / AX / 坐标 / 像素）、读后台写过闸不打扰用户、每步回读与取证、收工回流进档案； - Network accessline 46
| huashu-design | HTML 原生设计系统：高保真原型/幻灯片/动画/可视化，20 种设计哲学 + 5 维专家评审 + MP4 导出 | https://github.com/alchaincyf/huashu-design | - Network accessline 47
| huashu-mac-use | 让 agent 操控 Mac 上没有 API 的原生 app：探测选层（CDP / AX / 坐标 / 像素）、读后台写过闸不打扰用户、每步回读与取证、收工回流进档案；含 Swift 内核与 CDP 工具 | https://github.com/alchaincyf/huashu-mac-use | - Network accessline 48
| huashu-gpt-image | GPT-image 的 prompt 工程方法论：真实参考名替代形容词，含单图 playbook、批量网格生成、失败模式树 | https://github.com/alchaincyf/huashu-gpt-image | - Network accessline 49
| huashu-icon-set | 端到端为项目生成风格统一的图标集：4×4 网格批量生成 + 逐个精度兜底 + 智能抠图（豆包环境专用，依赖内置 image_gen） | https://github.com/alchaincyf/huashu-icon-set | - Network accessline 50
| huashu-slide-doubao | 豆包环境专用视觉物料生产：slides + 公众号封面 + 视频封面，走内置 image_gen 零 API 费用 | https://github.com/alchaincyf/huashu-slide-doubao | - Network accessline 51
| huashu-slide-codex | Codex 环境专用视觉物料生产：slides + 公众号封面 + 视频封面，走 Codex 内置 image_gen | https://github.com/alchaincyf/huashu-slide-codex | - Network accessline 52
| huashu-excel | 数据分析全流程：体检脏表→清洗→定口径→算指标→对账→报告，依赖仅 openpyxl | https://github.com/alchaincyf/huashu-excel | - Network accessline 53
| huashu-md-html | md 流水线：万物（PDF/DOCX/EPUB/网页/音频）转干净 md，md 加工成出版级 HTML/DOCX，四套反 AI slop 主题 | https://github.com/alchaincyf/huashu-md-html | - Network accessline 54
| seedance-skill | 白模驱动的 AI 视频工作台：白模参考视频与提示词出自同一份 scene.json，渲染前做几何体检 | https://github.com/alchaincyf/seedance-skill | - Network accessline 55
| tramstop-skill | 电车站.skill：证据驱动的去 AI 味，四层 AI 味模型 + 真实素材注入，来自四版本盲测实验 | https://github.com/alchaincyf/tramstop-skill | - Network accessline 56
| dukou | 渡口：公众号文章一键渡到 X Articles / B站专栏，Chrome 插件 + 本地桥 + skill | https://github.com/alchaincyf/dukou | - Network accessline 57
| x-mentor-skill | X 导师：蒸馏 6 位顶级 X 创作者方法论 + 开源算法数据，完整的选题-写作-增长手册 | https://github.com/alchaincyf/x-mentor-skill | - Network accessline 58
| huashu-weread | 微信读书高阶顾问：书架+笔记交叉分析，个性化荐书/阶梯书单/笔记提炼/年度阅读复盘 | https://github.com/alchaincyf/huashu-weread | - Network accessline 59
| nuwa-skill | 女娲：蒸馏任何人的思维方式——心智模型、决策启发式、表达 DNA，产出可运行的人物 skill | https://github.com/alchaincyf/nuwa-skill | - Network accessline 60
| darwin-skill | 达尔文：让 skill 无限进化——评估→改进→测试→保留或回滚，全程 git 留痕 | https://github.com/alchaincyf/darwin-skill | - Network accessline 61
| freud-skill | 弗洛伊德：给 AI 做心理分析，基于 Anthropic 可解释性研究，诊断 prompt/skill 的身份冲突并重写 | https://github.com/alchaincyf/freud-skill | - Network accessline 62
| skills-guide | Claude Code Skills 完整指南：理解、查找和创建 skills | https://github.com/alchaincyf/skills-guide | - Network accessline 63
| huashu-report | 机构级研究报告与学术论文：六种报告原型 + 结构骨架 + 图表模式库 + 可复用生产流水线，规范提炼自 2026 年 42 份顶级机构报告实测 | https://github.com/alchaincyf/huashu-report | - Network accessline 64
| zhangxuefeng-skill | 张雪峰的认知操作系统：高考志愿/考研/职业规划 | https://github.com/alchaincyf/zhangxuefeng-skill | - Network accessline 65
| steve-jobs-skill | 乔布斯的认知操作系统：产品判断、砍需求、品味 | https://github.com/alchaincyf/steve-jobs-skill | - Network accessline 66
| elon-musk-skill | 马斯克的认知操作系统：第一性原理、成本结构、激进迭代 | https://github.com/alchaincyf/elon-musk-skill | - Network accessline 67
| munger-skill | 查理·芒格的认知操作系统：逆向思考、认知偏误、投资决策 | https://github.com/alchaincyf/munger-skill | - Network accessline 68
| karpathy-skill | Andrej Karpathy 的认知操作系统：AI 技术可靠性、学习方法、行业判断 | https://github.com/alchaincyf/karpathy-skill | - Network accessline 69
| trump-skill | 特朗普的思维操作系统：谈判、权力、传播 | https://github.com/alchaincyf/trump-skill | - Network accessline 70
| feynman-skill | 费曼的认知操作系统：真懂 vs 记住名词、货物崇拜检测 | https://github.com/alchaincyf/feynman-skill | - Network accessline 71
| naval-skill | Naval Ravikant 的认知操作系统：杠杆、特定知识、财富路径 | https://github.com/alchaincyf/naval-skill | - Network accessline 72
| sun-yuchen-perspective | 孙宇晨的注意力收割操作系统：注意力经济、营销、危机公关 | https://github.com/alchaincyf/sun-yuchen-perspective | - Network accessline 73
| zhang-yiming-skill | 张一鸣的认知操作系统：产品、组织、全球化、延迟满足 | https://github.com/alchaincyf/zhang-yiming-skill | - Network accessline 74
| taleb-skill | 塔勒布的认知操作系统：尾部风险、反脆弱、质疑主流叙事 | https://github.com/alchaincyf/taleb-skill | - Network accessline 75
| mrbeast-skill | MrBeast 的内容创造操作系统：视频标题/封面/钩子/留存 | https://github.com/alchaincyf/mrbeast-skill | - Network accessline 76
| paul-graham-skill | Paul Graham 的认知操作系统：创业、写作、做用户真正要的东西 | https://github.com/alchaincyf/paul-graham-skill | - Network accessline 77
| ilya-sutskever-skill | Ilya Sutskever 的认知操作系统：深度学习直觉、Scaling、AI 本质 | https://github.com/alchaincyf/ilya-sutskever-skill | - Network accessline 78
| huashu-art-motion | 艺术与解说动画：35种艺术风格、9种解说动画语法，拆解复刻、口播驱动整片，用代码让画动起来 | https://github.com/alchaincyf/huashu-art-motion | - Network accessline 79
| huashu-flash | 闪电.skill：照Anthropic两周把claude.ai提速3倍的方法给网站或App提速，先量基线、再证指标、逐步优化，用棘轮锁住只许变好 | https://github.com/alchaincyf/huashu-flash | - Network accessline 80
| mcstomach | 麦门胃：读麦当劳历史订单，带证据提炼口味规则，确认后生成可携带的个人「胃」 | https://github.com/alchaincyf/mcstomach | - Network accessline 81
| huashu-motion | 让你的agent一键直出商业级产品宣传片：会作曲，能指着画面改。Commercial-grade launch films by your coding agent — point at the frame to change it. | https://github.com/alchaincyf/huashu-motion | - Network accessline 82
| huashu-cad | 用自然语言出可编辑CAD：户型与平面布置（DXF）、齿轮减速器关节模组等机械装配（STEP），自动校验干涉与啮合，出交互爆炸图、运转视频和装配工程图。Agent skill. | https://github.com/alchaincyf/huashu-cad | - Network accessline 88
- 公众号：「花叔」（在微信里搜「花叔」） - B站：花叔v：https://space.bilibili.com/14097567 - Network accessline 89
- B站：花叔v：https://space.bilibili.com/14097567 - Network accessline 90
- 小红书：花叔：https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf - Network accessline 91
- 个人网站：https://www.huasheng.ai/ - Network accessline 92
- X：https://x.com/AlchainHust - Network accessline 93
- YouTube：https://www.youtube.com/@Alchain - Network accessline 94
- 更多开源项目：https://github.com/alchaincyf?tab=repositories
references/ai-video-review.md
- Access to secretsline 26
[Credential-related source omitted]
references/animation-best-practices.md
- Network accessline 287
原生实现参考 https://aerotwist.com/blog/flip-your-animations/
references/animation-pitfalls.md
- Network accessline 365
**踩的坑（2026-05 觅游宣传动画）**：动画 HTML 用 `<script src="https://unpkg.com/react...">` + `<script src=".../@babel/standalone">` 走 CDN。本机有全局代理，Playwright 录制时 chromium 连 unpkg / Google Fonts 全部 `net::ERR_CONNECTION_CLOSED`：
references/app-prototype.md
- Network accessline 35
Wikimedia 下载避坑（本机 curl 走代理 TLS 会炸，Python urllib 直接走得通）： - Network accessline 38
# 合规 User-Agent 是硬性要求，否则 429 UA = 'ProjectName/0.1 (https://github.com/you; you@example.com)' - Network accessline 39
UA = 'ProjectName/0.1 (https://github.com/you; you@example.com)' - Network accessline 40
# 用 MediaWiki API 查真实 URL api = 'https://commons.wikimedia.org/w/api.php' # action=query&list=categorymembers 批量拿系列 / prop=imageinfo+iiurlwidth 取指定宽度 thumburl - Network accessline 41
api = 'https://commons.wikimedia.org/w/api.php'
references/apple-gallery-showcase.md
- Network accessline 268
content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves= - Network accessline 269
position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles - Network accessline 270
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values
references/brand-asset-protocol.md
- Network accessline 72
> ⚠<U+FE0F> **别只试 `curl <brand>.com/logo.svg` 就放弃**——现在的官网大多是 SPA，直连静态路径基本返回空壳 HTML（2026-06-06 实测 Trae 官网 5 条直连路径全是空壳）。**数字产品 / SaaS / AI 工具优先用图标聚合源**，命中率最高、直出干净 SVG。 - Network accessline 77
unset ALL_PROXY HTTP_PROXY HTTPS_PROXY all_proxy http_proxy https_proxy # 清代理，否则 TLS 易炸 # svgl —— AI/开发者品牌覆盖最全（Claude/Cursor/OpenAI/Copilot/Anthropic/Vercel…），含 light/dark + wordmark curl -s "https://api.svgl.app?search=<brand>" # - Network accessline 78
# svgl —— AI/开发者品牌覆盖最全（Claude/Cursor/OpenAI/Copilot/Anthropic/Vercel…），含 light/dark + wordmark curl -s "https://api.svgl.app?search=<brand>" # 返回 JSON，取 route(.light/.dark) 的 svg URL 再下载 # simpleicons —— 单色 glyph，可直接按品牌色上色 - Network accessline 79
curl -s "https://api.svgl.app?search=<brand>" # 返回 JSON，取 route(.light/.dark) 的 svg URL 再下载 - Network accessline 81
curl -o logo.svg "https://cdn.simpleicons.org/<slug>/<hexcolor>" - Network accessline 85
curl -A "Mozilla/5.0" -L -o assets/<brand>-brand/logo.svg "<official-logo-url>" - Network accessline 89
curl -A "Mozilla/5.0" -L https://<brand>.com -o assets/<brand>-brand/homepage.html - Network accessline 94
curl -o logo.png "https://www.google.com/s2/favicons?domain=<brand-domain>&sz=256" # 256px 官方站点图标 - Network accessline 102
按优先级： 1. **官方产品页 hero image**（最高优先级）：右键查看图片地址 / curl 获取。分辨率通常 2000px+ - Network accessline 103
1. **官方产品页 hero image**（最高优先级）：右键查看图片地址 / curl 获取。分辨率通常 2000px+ - Network accessline 110
# 示例：下载 DJI 官网产品 hero image curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero.png - Network accessline 111
curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero.png
references/cinematic-patterns.md
- Network accessline 179
用法：`http://.../slide.html?seek=12` 直接看第 12 秒画面，不用等播放。
references/content-guidelines.md
- Network accessline 7
Anthropic 官方 frontend-design skill（2026）把当下 AI 生成页面的聚类写得很清楚（[原文](https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md)）：
references/design-context.md
- Network accessline 27
# 用Playwright截图一个公开URL npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080 - Network accessline 28
npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080 - Network accessline 147
### 2. 选一个known design system作为骨架 - 用Radix Colors做配色（https://www.radix-ui.com/colors） - Network accessline 148
- 用Radix Colors做配色（https://www.radix-ui.com/colors） - Network accessline 149
- 用shadcn/ui做组件vocabulary（https://ui.shadcn.com）
references/experience.md
- Network accessline 9
- 发现：不加约束时，三个方向会一起滑向暖奶油底＋高反差衬线标题＋陶土色点缀。这是模型自己的默认审美（Anthropic 的交互配色），Anthropic 官方 frontend-design skill（2026）把它列为 AI 生成页面聚类特征的第一条。但这个家族本身不丑，问题是三版挤在一起、项目之间反复出现（见 S6）。 - 下次：三版别挤在同一个外观家族；`design_lint.py compare` 会报「三版落在同一个外观家族」，`ledger check` 会 - Network accessline 11
- 证据：skill 开发期的内部自测与多个项目的三方向截图（2026-10 盘点，未公开）；官方原文 https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
references/gsap-recipes.md
- Network accessline 19
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
references/hero-animation-case-study.md
- Network accessline 3
> 从 huashu-design hero 动画 v9（25 秒，8 场景）里提炼出的**一种可复用的视觉编排结构**。 > 不是动画制作流水线，是**什么场景下这种编排是"对的"**。 > 实战参考：[demos/hero-animation-v9.mp4](../demos/hero-animation-v9.mp4) · [https://www.huasheng.ai/huashu-design-hero/](https://www.huasheng.ai/huas - Network accessline 5
> 实战参考：[demos/hero-animation-v9.mp4](../demos/hero-animation-v9.mp4) · [https://www.huasheng.ai/huashu-design-hero/](https://www.huasheng.ai/huashu-design-hero/)
references/react-setup.md
- Network accessline 10
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script> - Network accessline 11
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script> - Network accessline 12
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script> - Network accessline 32
<!-- 先React+Babel --> <script src="https://unpkg.com/react@18.3.1/..."></script> - Network accessline 33
<script src="https://unpkg.com/react@18.3.1/..."></script> - Network accessline 34
<script src="https://unpkg.com/react-dom@18.3.1/..."></script> - Network accessline 35
<script src="https://unpkg.com/@babel/standalone@7.29.0/..."></script> - Network accessline 152
async complete(prompt) { const key = document.getElementById('api-key').value; const res = await fetch('https://api.anthropic.com/v1/messages', { - Network accessline 153
const key = document.getElementById('api-key').value; const res = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', - Network accessline 154
const res = await fetch('https://api.anthropic.com/v1/messages', { - Network accessline 192
<!-- React + Babel pinned --> <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script> - Network accessline 193
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script> - Network accessline 194
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script> - Network accessline 195
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
references/slide-decks.md
- Network accessline 254
<meta charset="UTF-8"> <title>P05 · Chapter Title</title> <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet"> - Network accessline 255
<title>P05 · Chapter Title</title> <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet"> <link rel="stylesheet" href="../shared/tokens.css"> - Network accessline 256
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
references/voiceover-pipeline.md
- Access to secretsline 194
[Credential-related source omitted] - Access to secretsline 368
[Credential-related source omitted] - Network accessline 377
[Credential-related source omitted] - Access to secretsline 377
[Credential-related source omitted] - Network accessline 379
DOUBAO_TTS_ENDPOINT=https://openspeech.bytedance.com/api/v3/tts/unidirectional - Access to secretsline 386
[Credential-related source omitted] - Access to secretsline 409
[Credential-related source omitted]
scripts/add-music.sh
- Executable scriptline 1
#!/usr/bin/env bash
scripts/build_specimens.py
- Executable scriptline 1
#!/usr/bin/env python3
scripts/capabilities.py
scripts/cloud/ai-review-video.py
- Executable scriptline 1
#!/usr/bin/env python3 - Access to secretsline 13
[Credential-related source omitted] - Access to secretsline 30
[Credential-related source omitted] - Network accessline 47
API_URL = "https://ark.cn-beijing.volces.com/api/v3/responses" - Access to secretsline 49
[Credential-related source omitted] - Access to secretsline 78
[Credential-related source omitted] - Access to secretsline 79
[Credential-related source omitted] - Access to secretsline 81
[Credential-related source omitted] - Access to secretsline 84
[Credential-related source omitted] - Access to secretsline 88
[Credential-related source omitted] - Access to secretsline 151
[Credential-related source omitted] - Access to secretsline 163
[Credential-related source omitted] - Access to secretsline 272
[Credential-related source omitted] - Network accessline 284
[Credential-related source omitted] - Access to secretsline 284
[Credential-related source omitted] - Network accessline 285
session = requests.Session() - Access to secretsline 334
[Credential-related source omitted] - Access to secretsline 350
[Credential-related source omitted] - Access to secretsline 364
[Credential-related source omitted]
scripts/cloud/tts-doubao.mjs
- Executable scriptline 1
#!/usr/bin/env node - Access to secretsline 23
[Credential-related source omitted] - Access to secretsline 24
[Credential-related source omitted] - Network accessline 27
* DOUBAO_TTS_VOICE_ID 必填（音色 id） * DOUBAO_TTS_RESOURCE_ID 可选（默认按音色自动推断） * DOUBAO_TTS_ENDPOINT 默认 https://openspeech.bytedance.com/api/v3/tts/unidirectional - Network accessline 28
* DOUBAO_TTS_RESOURCE_ID 可选（默认按音色自动推断） * DOUBAO_TTS_ENDPOINT 默认 https://openspeech.bytedance.com/api/v3/tts/unidirectional */ - Network accessline 29
* DOUBAO_TTS_ENDPOINT 默认 https://openspeech.bytedance.com/api/v3/tts/unidirectional - Access to secretsline 42
[Credential-related source omitted] - Access to secretsline 85
[Credential-related source omitted] - Access to secretsline 122
[Credential-related source omitted] - Access to secretsline 124
[Credential-related source omitted] - Access to secretsline 136
[Credential-related source omitted] - Access to secretsline 191
[Credential-related source omitted] - Network accessline 194
async function tts({ text, voice, speed, encoding, timestamps }) { const endpoint = process.env.DOUBAO_TTS_ENDPOINT || 'https://openspeech.bytedance.com/api/v3/tts/unidirectional'; - Network accessline 195
const endpoint = process.env.DOUBAO_TTS_ENDPOINT || 'https://openspeech.bytedance.com/api/v3/tts/unidirectional'; - Access to secretsline 204
[Credential-related source omitted] - Network accessline 221
const res = await fetch(endpoint, { - Network accessline 252
if (!args.yes && process.env.HUASHU_CLOUD_OK !== '1') { const host = new URL(process.env.DOUBAO_TTS_ENDPOINT || 'https://openspeech.bytedance.com').hostname; - Network accessline 253
const host = new URL(process.env.DOUBAO_TTS_ENDPOINT || 'https://openspeech.bytedance.com').hostname;
scripts/convert-formats.sh
scripts/design-gate-hook.sh
- Executable scriptline 1
#!/bin/bash
scripts/design_lint.py
- Executable scriptline 1
#!/usr/bin/env python3 - Network accessline 33
# 2026 年 AI 生成页面的聚类特征。出处：Anthropic 官方 frontend-design skill（2026） # https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md - Network accessline 34
# https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md - Access to secretsline 366
[Credential-related source omitted]
scripts/export_deck_pdf.mjs
- Executable scriptline 1
#!/usr/bin/env node
scripts/export_deck_pptx.mjs
- Executable scriptline 1
#!/usr/bin/env node
scripts/export_deck_stage_pdf.mjs
- Executable scriptline 1
#!/usr/bin/env node
scripts/fetch_images.py
- Executable scriptline 1
#!/usr/bin/env python3 - Access to secretsline 19
[Credential-related source omitted] - Network accessline 21
API = "https://commons.wikimedia.org/w/api.php" - Network accessline 23
UA = "huashu-design-image-fetcher/1.0 (https://huasheng.ai; skill contact)" - Network accessline 26
def _api_get(params): url = API + "?" + urllib.parse.urlencode(params) req = urllib.request.Request(url, headers={"User-Agent": UA}) - Network accessline 27
url = API + "?" + urllib.parse.urlencode(params) req = urllib.request.Request(url, headers={"User-Agent": UA}) with urllib.request.urlopen(req, timeout=30) as r: - Network accessline 28
req = urllib.request.Request(url, headers={"User-Agent": UA}) - Network accessline 29
with urllib.request.urlopen(req, timeout=30) as r: - Network accessline 37
def fetch(query, out, count, width): - Network accessline 61
path = os.path.join(out, fn) try: req = urllib.request.Request(thumb, headers={"User-Agent": UA}) - Network accessline 62
try: req = urllib.request.Request(thumb, headers={"User-Agent": UA}) with urllib.request.urlopen(req, timeout=60) as r, open(path, "wb") as f: - Network accessline 63
req = urllib.request.Request(thumb, headers={"User-Agent": UA}) - Network accessline 64
with urllib.request.urlopen(req, timeout=60) as r, open(path, "wb") as f: - Network accessline 83
allgot = [] for q in a.query: allgot += fetch(q, a.out, a.count, a.width) - Network accessline 84
for q in a.query: allgot += fetch(q, a.out, a.count, a.width) print(f"\n=== 共下载 {len(allgot)} 张到 {a.out} ===") - Network accessline 85
allgot += fetch(q, a.out, a.count, a.width)
scripts/gen_deck_thumbs.mjs
- Executable scriptline 1
#!/usr/bin/env node
scripts/html2pptx.js
scripts/learn.py
scripts/mix-voiceover.sh
- Executable scriptline 1
#!/usr/bin/env bash
scripts/narrate-pipeline.mjs
scripts/pptx_from_rendered.py
- Executable scriptline 1
#!/usr/bin/env python3
scripts/ref_board.py
- Executable scriptline 1
#!/usr/bin/env python3
scripts/render-narration.sh
scripts/render-video-seek.js
- Executable scriptline 1
#!/usr/bin/env node
scripts/render-video.js
- Executable scriptline 1
#!/usr/bin/env node
scripts/sfx-cues.sh
- Executable scriptline 1
#!/bin/bash
scripts/tests/fixtures/lint_offline.html
- Network accessline 1
<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="http://10.255.255.1/never.css"><style>body{background:#fff;font:17px Helvetica}</style></head><body><p>外网样式表连不上的页面，体检不能卡死整批，也不能让后面的文件没结果。</p></body></html>
scripts/tests/test_compare_failures.py
- Executable scriptline 1
Executable file
scripts/tests/test_design_lint.py
scripts/tests/test_pptx_from_rendered.py
- Executable scriptline 1
Executable file
scripts/tests/test_xhs_render.py
- Executable scriptline 1
Executable file
scripts/verify-video.sh
scripts/verify.py
- Executable scriptline 1
#!/usr/bin/env python3
scripts/xhs_render.py
- Executable scriptline 1
#!/usr/bin/env python3
How the signals fit together
Facts from a static read of the files at the pinned commit. They describe what the code does, not why.
Some files could not be read; the facts below still hold.
Declared and executed: 3 facts
- Contacts ark.cn-beijing.volces.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/cloud/ai-review-video.py:47High confidence
- Contacts openspeech.bytedance.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/cloud/tts-doubao.mjs:195High confidence
- Contacts commons.wikimedia.org, which SKILL.md, the README and the plugin manifest do not mentionscripts/fetch_images.py:21High confidence
Signal confidence: 364 facts
- Network access in prose of documentationREADME.en.md:10Low confidence
- Network access in prose of documentationREADME.en.md:11Low confidence
- Network access in prose of documentationREADME.en.md:12Low confidence
- Network access in prose of documentationREADME.en.md:46Low confidence
- Network access in prose of documentationREADME.en.md:47Low confidence
- Network access in prose of documentationREADME.en.md:50Low confidence
- Network access in prose of documentationREADME.en.md:51Low confidence
- Network access in prose of documentationREADME.en.md:52Low confidence
- Network access in prose of documentationREADME.en.md:53Low confidence
- Network access in prose of documentationREADME.en.md:68Low confidence
- Network access in prose of documentationREADME.en.md:72Low confidence
- Network access in prose of documentationREADME.en.md:73Low confidence
- Network access in prose of documentationREADME.en.md:81Low confidence
- Network access in prose of documentationREADME.en.md:89Low confidence
- Network access in prose of documentationREADME.en.md:95Low confidence
- Network access in prose of documentationREADME.en.md:96Low confidence
- Network access in prose of documentationREADME.en.md:102Low confidence
- Network access in prose of documentationREADME.en.md:108Low confidence
- Network access in prose of documentationREADME.en.md:114Low confidence
- Network access in prose of documentationREADME.en.md:131Low confidence
- Network access in prose of documentationREADME.en.md:132Low confidence
- Network access in prose of documentationREADME.en.md:133Low confidence
- Network access in prose of documentationREADME.en.md:151Low confidence
- Network access in prose of documentationREADME.en.md:152Low confidence
- Network access in prose of documentationREADME.en.md:153Low confidence
- Network access in prose of documentationREADME.en.md:182Low confidence
- Network access in prose of documentationREADME.en.md:198Low confidence
- Network access in prose of documentationREADME.en.md:204Low confidence
- Network access in prose of documentationREADME.en.md:210Low confidence
- Network access in prose of documentationREADME.en.md:216Low confidence
- Network access in prose of documentationREADME.en.md:222Low confidence
- Network access in prose of documentationREADME.en.md:228Low confidence
- Network access in prose of documentationREADME.en.md:234Low confidence
- Network access in prose of documentationREADME.en.md:240Low confidence
- Network access in prose of documentationREADME.en.md:406Low confidence
- Network access in prose of documentationREADME.en.md:407Low confidence
- Network access in prose of documentationREADME.en.md:408Low confidence
- Network access in prose of documentationREADME.en.md:409Low confidence
- Network access in prose of documentationREADME.en.md:410Low confidence
- Network access in prose of documentationREADME.en.md:422Low confidence
- Network access in prose of documentationREADME.en.md:430Low confidence
- Network access in prose of documentationREADME.en.md:431Low confidence
- Network access in prose of documentationREADME.en.md:432Low confidence
- Network access in prose of documentationREADME.en.md:433Low confidence
- Network access in prose of documentationREADME.en.md:434Low confidence
- Network access in prose of documentationREADME.en.md:435Low confidence
- Network access in prose of documentationREADME.en.md:436Low confidence
- Network access in prose of documentationREADME.en.md:437Low confidence
- Network access in prose of documentationREADME.en.md:438Low confidence
- Network access in prose of documentationREADME.en.md:442Low confidence
and 314 more
Works with
| Agent | Status | Evidence | Install to |
|---|---|---|---|
| Claude Code | Compatible | Standard SKILL.md SKILL.md | .claude/skills/<skill-name>/ |
| Codex | Compatible | Standard SKILL.md SKILL.md | .agents/skills/<skill-name>/ |
| Cursor | Compatible | Standard SKILL.md SKILL.md | .cursor/skills/<skill-name>/ |
| Gemini CLI | Compatible | Standard SKILL.md SKILL.md | .gemini/skills/<skill-name>/ |
| GitHub Copilot | Compatible | Standard SKILL.md SKILL.md | .github/skills/<skill-name>/ |
| OpenCode | Compatible | Standard SKILL.md SKILL.md | .opencode/skills/<skill-name>/ |
- Native The repository ships a manifest, folder or frontmatter field for this agent.
- Compatible A standard SKILL.md that this agent can read.
- Unknown No evidence either way.
Derived automatically from paths, manifests and frontmatter. Not tested on each agent.
Explore alternatives and comparisons
Add this badge to your README
It updates every night and links to this page.
[](https://hotskills.dev/skill/alchaincyf-huashu-design/)