[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-606":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},606,"huashu-design","alchaincyf\u002Fhuashu-design","alchaincyf","Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 \u002F 幻灯片 \u002F 动画 + 20 设计哲学 + 5 维评审 + MP4 导出 · Agent-agnostic",null,"HTML",18048,2258,79,6,0,1516,2224,4791,4548,45,"Other",false,"master",true,[],"2026-06-12 02:00:15","\u003Csub>\u003Cb>🌐 English\u003C\u002Fb> · \u003Ca href=\"README.zh.md\">中文\u003C\u002Fa>\u003C\u002Fsub>\n\n\u003Cdiv align=\"center\">\n\n# Huashu Design\n\n> *\"Type. Hit enter. A finished design lands in your lap.\"*\n> *「打字。回车。一份能交付的设计。」*\n\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Personal%20Use%20Only-orange.svg)](LICENSE)\n[![Agent-Agnostic](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAgent-Agnostic-blueviolet)](https:\u002F\u002Fskills.sh)\n[![Skills](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fskills.sh-Compatible-green)](https:\u002F\u002Fskills.sh)\n\n\u003Cbr>\n\n**Say one sentence to your agent — Claude Code, Cursor, Codex, OpenClaw, Hermes all work.**\n\n\u003Cbr>\n\n3 to 30 minutes — you ship a **product launch animation**, a clickable App prototype, an editable PPT deck, a print-grade infographic.\n\nNot \"decent for AI\" quality — it looks like a real design team made it. Give the skill your brand assets (logo, colors, UI screenshots) and it reads your brand's voice; give it nothing and the built-in 20 design vocabularies still keep you out of AI slop territory.\n\n**Every animation in this README was made by huashu-design itself.** No Figma, no After Effects — just a sentence + skill run. Next product launch needs a promo video? You can make it too.\n\n```\nnpx skills add alchaincyf\u002Fhuashu-design\n```\n\n[See it work](#demo-gallery) · [Install](#install) · [What it does](#what-it-does) · [How it works](#core-mechanics) · [vs. Claude Design](#vs-claude-design)\n\n> 📖 **Note for English readers**: this skill is built by a Chinese-speaking developer. The skill's agent prompts (`SKILL.md`, `references\u002F*.md`) are in Chinese but the agent is bilingual — works fine with English tasks. The demos below are the English parallel versions; the Chinese ones are in the default-named files (see the [Chinese README](README.zh.md)).\n>\n> 📖 **致中文读者**：这个 skill 由花叔（@AlchainHust）开发。一句话能让 agent 在 3–30 分钟内交付**产品发布动画 \u002F 可点击 App 原型 \u002F 可编辑 PPT \u002F 印刷级信息图**。完整中文介绍见 [README.zh.md](README.zh.md)。\n\n\u003C\u002Fdiv>\n\n---\n\n\u003Cp align=\"center\">\n  \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fhero-animation-v10-en.mp4\" autoplay muted loop playsinline width=\"100%\">\n    Your browser doesn't support inline video. \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fhero-animation-v10-en.mp4\">Download MP4\u003C\u002Fa>.\n  \u003C\u002Fvideo>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\u003Csub>▲ 10-second hero animation showing what huashu-design does (\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fhero-animation-v10-en.mp4\">download MP4\u003C\u002Fa> if autoplay doesn't work)\u003C\u002Fsub>\u003C\u002Fp>\n\n---\n\n## Install\n\n```bash\nnpx skills add alchaincyf\u002Fhuashu-design\n```\n\nThen just talk to Claude Code:\n\n```\n\"Make a keynote for AI psychology. Give me 3 style directions to pick from.\"\n\"Build an iOS prototype for a Pomodoro app — 4 screens, actually clickable.\"\n\"Turn this logic into a 60-second animation. Export MP4 and GIF.\"\n\"Run a 5-dimension expert review on this design.\"\n```\n\nNo buttons, no panels, no Figma plugin. Agent-agnostic — drops into Claude Code, Cursor, Trae, Hermes, OpenClaw, or any markdown-skill-capable agent.\n\n---\n\n## Star History\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fstar-history.com\u002F#alchaincyf\u002Fhuashu-design&Date\">\n    \u003Cimg src=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=alchaincyf\u002Fhuashu-design&type=Date\" alt=\"huashu-design Star History\" width=\"80%\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n---\n\n## What it does\n\n| Capability | Deliverable | Typical time |\n|---|---|---|\n| Interactive prototype (App \u002F Web) | Single-file HTML · real iPhone bezel · clickable · Playwright-verified | 10–15 min |\n| Slide decks | HTML deck (browser presentation) + editable PPTX (text frames preserved) | 15–25 min |\n| Motion design | MP4 (25fps \u002F 60fps interpolation) + GIF (palette-optimized) + BGM | 8–12 min |\n| Design variations | 3+ side-by-side · Tweaks live params · cross-dimension exploration | 10 min |\n| Infographic \u002F data viz | Print-quality typography · exports to PDF\u002FPNG\u002FSVG | 10 min |\n| Design direction advisor | 5 schools × 20 philosophies · 3 directions recommended · Demos generated in parallel | 5 min |\n| 5-dimension expert critique | Radar chart + Keep\u002FFix\u002FQuick Wins · actionable punch list | 3 min |\n\n---\n\n## Demo Gallery\n\n> English parallel versions of the demos. Chinese versions live at the default filenames (see the Chinese README).\n\n### Design Direction Advisor\n\nThe fallback for vague briefs: pick 3 differentiated directions from 5 schools × 20 philosophies, generate all 3 demos in parallel, let the user choose.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fw3-fallback-advisor-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### iOS App Prototype\n\nPixel-accurate iPhone 15 Pro body (Dynamic Island \u002F status bar \u002F Home Indicator) · state-driven multi-screen navigation · real images pulled from Wikimedia\u002FMet\u002FUnsplash · Playwright click tests before delivery.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fc1-ios-prototype-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### Motion Design Engine\n\nStage + Sprite time-slice model · `useTime` \u002F `useSprite` \u002F `interpolate` \u002F `Easing` — four APIs cover every animation need · one command exports MP4 \u002F GIF \u002F 60fps-interpolated \u002F BGM-scored finals.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fc3-motion-design-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### HTML Slides → Editable PPTX\n\nHTML decks for browser presentation · `html2pptx.js` reads DOM computed styles and translates each element into real PowerPoint objects · exports are **actual text frames**, not image-bed fakes.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fc2-slides-pptx-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### Tweaks · Live Variation Switching\n\nColors \u002F typography \u002F information density parameterized · side panel toggle · pure-frontend + `localStorage` persistence · survives reload.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fc4-tweaks-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### Infographic \u002F Data Viz\n\nMagazine-grade typography · precise CSS Grid columns · `text-wrap: pretty` typographic details · driven by real data · exports to vector PDF \u002F 300dpi PNG \u002F SVG.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fc5-infographic-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### 5-Dimension Expert Critique\n\nPhilosophical coherence · visual hierarchy · execution craft · functionality · innovation — each scored 0–10 · radar-chart visualization · outputs Keep \u002F Fix \u002F Quick Wins punch list.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fc6-expert-review-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### Junior Designer Workflow\n\nNo heroic one-shot attempts: start with assumptions + placeholders + reasoning, show it to the user early, then iterate. Fixing a misunderstanding early is 100× cheaper than fixing it late.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fw2-junior-designer-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n### Core Asset Protocol · 5-step hard process\n\nMandatory whenever the task involves a specific brand: ask → search → download (three fallback paths) → verify + extract → write `brand-spec.md` covering **logo, product shots, UI screenshots, colors, fonts** — all required assets, not just colors.\n\n\u003Cp align=\"center\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Falchaincyf\u002Fhuashu-design\u002Freleases\u002Fdownload\u002Fv2.0\u002Fw1-brand-protocol-en.gif\" width=\"100%\">\u003C\u002Fp>\n\n---\n\n## Core Mechanics\n\n### Core Asset Protocol\n\nThe hardest rule in the skill. When the task touches a specific brand (Stripe, Linear, Anthropic, DJI, your own company, etc.), five steps are enforced:\n\n| Step | Action | Purpose |\n|---|---|---|\n| 1 · Ask | Checklist of 6 asset types: logo \u002F product shots \u002F UI screenshots \u002F color palette \u002F fonts \u002F brand guidelines | Respect existing resources |\n| 2 · Search official channels | `\u003Cbrand>.com\u002Fbrand` · `\u003Cbrand>.com\u002Fpress` · `brand.\u003Cbrand>.com` · product pages · launch films | Find authoritative assets |\n| 3 · Download by asset type | Logo (SVG → inline-SVG in HTML → social avatar) · Product shots (hero → press kit → launch video frames → AI-generated from reference) · UI (App Store screenshots → official video frames) | Three fallback paths per asset type |\n| 4 · Verify + extract | Check logo fidelity · product image resolution · UI freshness · grep color hex from real assets | **Never guess from memory** |\n| 5 · Freeze to spec | Write `brand-spec.md` with logo paths, product image paths, UI screenshot paths, CSS variables for colors\u002Ffonts | Un-frozen knowledge evaporates |\n\n**Ranking of asset importance** (from the skill's internal rubric):\n\n1. Logo — mandatory for any brand\n2. Product renders — mandatory for physical products\n3. UI screenshots — mandatory for digital products\n4. Color values — auxiliary\n5. Fonts — auxiliary\n\nA\u002FB-tested (v1 vs v2, 6 agents each): **v2 reduced stability variance by 5×**. Stability of stability — that's the real moat.\n\n### Design Direction Advisor (Fallback)\n\nTriggered when the brief is too vague to execute:\n\n- Don't run on generic intuition — enter Fallback mode\n- Recommend 3 differentiated directions from 5 schools × 20 philosophies, each **from a different school**\n- Each comes with flagship works, gestalt keywords, representative designer\n- Generate 3 visual demos in parallel, let the user choose\n- Once chosen, continue into the Junior Designer main flow\n\n### Junior Designer Workflow\n\nThe default working mode across every task:\n\n- Send the full question set in one batch, wait for all answers before moving\n- Write assumptions + placeholders + reasoning comments directly into the HTML\n- Show it to the user early (even if just gray blocks)\n- Fill in real content → variations → Tweaks — show at each of these three steps\n- Manually eyeball the browser with Playwright before delivery\n\n### Fact Verification First (Principle #0)\n\nThe highest-priority rule, added after a real failure mode: when the task mentions a specific product \u002F technology \u002F event (e.g., \"DJI Pocket 4\", \"Nano Banana Pro\", \"Gemini 3 Pro\"), the first action **must** be a `WebSearch` to confirm existence, release status, current version, and specs. No claims from training-corpus memory. Cost of a search: ~10 seconds. Cost of a wrong assumption: 1–2 hours of rework.\n\n### Anti AI-slop Rules\n\nAvoid the visual common denominator of AI output (purple gradients \u002F emoji icons \u002F rounded-corner + left border accent \u002F SVG humans \u002F Inter-as-display \u002F **CSS silhouettes standing in for real product shots**). Use `text-wrap: pretty` + CSS Grid + carefully chosen serif display faces + oklch colors.\n\n---\n\n## vs. Claude Design\n\nI'll be upfront: the Core Asset Protocol's philosophy was lifted from system prompts Anthropic wrote for Claude Design. That prompt hammers home a single idea — **great hi-fi design doesn't start from a blank page, it grows from existing design context**. That one principle is the difference between a 65-point design and a 90-point design.\n\nPositioning differences:\n\n| | Claude Design | huashu-design |\n|---|---|---|\n| Form | Web product (used in browser) | Skill (used in Claude Code) |\n| Quota | Subscription quota | API usage · parallel agents unblocked |\n| Output | Canvas + Figma export | HTML \u002F MP4 \u002F GIF \u002F editable PPTX \u002F PDF |\n| Interaction | GUI (click, drag, edit) | Conversation (tell agent, wait) |\n| Complex animation | Limited | Stage + Sprite timeline · 60fps export |\n| Agent compatibility | Claude.ai only | Claude Code \u002F Cursor \u002F Trae \u002F Hermes \u002F OpenClaw |\n\nClaude Design is a **better graphics tool**. Huashu-design makes **the graphics-tool layer disappear**. Two paths, different audiences.\n\n---\n\n## Limitations\n\n- **No layer-editable PPTX-to-Figma round-trip.** The output is HTML — screenshottable, recordable, image-exportable, but not draggable into Keynote for text-position tweaks.\n- **Framer-Motion-tier complex animations are out of scope.** 3D, physics simulation, particle systems exceed the skill's boundaries.\n- **Brand-from-zero design quality drops to 60–65 points.** Drawing hi-fi from nothing was always a last resort.\n\nThis is an 80-point skill, not a 100-point product. For people unwilling to open a graphical UI, an 80-point skill beats a 100-point product.\n\n---\n\n## Repository Structure\n\n```\nhuashu-design\u002F\n├── SKILL.md                 # Main doc (read by agent, Chinese)\n├── README.md                # English README (default, this file)\n├── README.zh.md             # Chinese README\n├── assets\u002F                  # Starter Components\n│   ├── animations.jsx       # Stage + Sprite + Easing + interpolate\n│   ├── ios_frame.jsx        # iPhone 15 Pro bezel\n│   ├── android_frame.jsx\n│   ├── macos_window.jsx\n│   ├── browser_window.jsx\n│   ├── deck_stage.js        # HTML deck engine\n│   ├── deck_index.html      # Multi-file deck assembler\n│   ├── design_canvas.jsx    # Side-by-side variation display\n│   ├── showcases\u002F           # 24 prebuilt samples (8 scenes × 3 styles)\n│   └── bgm-*.mp3            # 6 scene-specific background tracks\n├── references\u002F              # Drill-down docs by task (Chinese)\n│   ├── animation-pitfalls.md\n│   ├── design-styles.md     # 20 design philosophies in detail\n│   ├── slide-decks.md\n│   ├── editable-pptx.md\n│   ├── critique-guide.md\n│   ├── video-export.md\n│   └── ...\n├── scripts\u002F                 # Export toolchain\n│   ├── render-video.js      # HTML → MP4\n│   ├── convert-formats.sh   # MP4 → 60fps + GIF\n│   ├── add-music.sh         # MP4 + BGM\n│   ├── export_deck_pdf.mjs\n│   ├── export_deck_pptx.mjs\n│   ├── html2pptx.js\n│   └── verify.py\n└── demos\u002F                   # Capability demos referenced by this README\n```\n\n---\n\n## Origin Story\n\nThe day Anthropic launched Claude Design I played with it until 4 a.m. A few days later I realized I hadn't opened it once since — not because it's bad (it's the most polished product in the category) but because I'd rather have an agent work in my terminal than open any graphical UI.\n\nSo I had an agent deconstruct Claude Design itself (including the system prompts circulating in the community, the brand asset protocol, the component mechanics), distill it into a structured spec, then write it as a skill installed in my own Claude Code.\n\nThanks to Anthropic for writing the Claude Design prompts so clearly. This kind of derivative work inspired by other products is the new form of open-source culture in the AI era.\n\n---\n\n## License · Usage Rights\n\n**Personal use is free and unrestricted** — studying, research, creating things for yourself, writing articles, side projects, personal social media. Use it freely, no need to ask.\n\n**Enterprise \u002F commercial use is restricted** — any company, team, or for-profit organization integrating this skill into a product, external service, or client deliverable **must obtain authorization from Huasheng first**. Including but not limited to:\n- Using the skill as part of internal company tooling\n- Using skill outputs as the primary creative method for external deliverables\n- Building a commercial product on top of the skill\n- Using it in paid client projects\n\n**Indicative pricing**: USD 1,800 \u002F year (Annual) or USD 3,500 one-time (Perpetual). Custom enterprise terms available. See [LICENSE](LICENSE) for full terms.\n\n**Commercial licensing contact**: email **alchaincyf@gmail.com** (preferred) or DM on any social platform below.\n\n---\n\n## Connect · Huasheng (Huashu)\n\nHuasheng is an AI-native coder, independent developer, and AI content creator. Notable work: Cat Fill Light (App Store Top 1 in Paid category), *A Book on DeepSeek*, Nüwa.skill (GitHub 12k+ stars). Combined 300k+ followers across platforms.\n\n| Platform | Handle | Link |\n|---|---|---|\n| X \u002F Twitter | @AlchainHust | https:\u002F\u002Fx.com\u002FAlchainHust |\n| WeChat Official Account | 花叔 | Search \"花叔\" in WeChat |\n| Bilibili | 花叔 | https:\u002F\u002Fspace.bilibili.com\u002F14097567 |\n| YouTube | 花叔 | https:\u002F\u002Fwww.youtube.com\u002F@Alchain |\n| Xiaohongshu | 花叔 | https:\u002F\u002Fwww.xiaohongshu.com\u002Fuser\u002Fprofile\u002F5abc6f17e8ac2b109179dfdf |\n| Official Site | huasheng.ai | https:\u002F\u002Fwww.huasheng.ai\u002F |\n| Developer Hub | bookai.top | https:\u002F\u002Fbookai.top |\n\nFor commercial licensing, collaborations, or sponsored content, DM on any of the above.\n","Huashu Design 是一个基于 HTML 的设计工具，旨在通过简单的指令生成高质量的设计作品。其核心功能包括快速创建高保真原型、幻灯片、动画，并支持 MP4 格式导出。该工具内置了 20 种设计哲学和 5 维评审机制，确保输出的设计质量接近专业设计团队的水平。用户只需提供品牌资产或简单描述需求，即可在几分钟内获得满意的设计成果。Huashu Design 适用于需要快速制作产品发布动画、可点击的应用原型、可编辑的 PPT 演示文稿以及印刷级信息图表的场景，尤其适合那些希望提高设计效率同时保持高品质输出的个人或团队。",2,"2026-06-11 02:38:03","CREATED_QUERY"]