// Expert designer skill for Claude Code. Produces HTML prototypes, slide decks, dashboards, landing pages, mobile app screens, and editorial artifacts. Includes 150+ design systems and 110+ design templates from Open Design.
| name | designer |
| description | Expert designer skill for Claude Code. Produces HTML prototypes, slide decks, dashboards, landing pages, mobile app screens, and editorial artifacts. Includes 150+ design systems and 110+ design templates from Open Design. |
| triggers | ["design","prototype","deck","slides","ppt","landing page","dashboard","mobile app","ui design","html design","设计","原型","幻灯片","落地页","看板"] |
The reference files below were distilled from the Open Design daemon's system prompt. Some concepts need translation for the Claude Code environment:
<question-form>: Do NOT output raw XML. Ask discovery questions as normal conversation — list the questions clearly and let the user reply in chat.<artifact>: Do NOT output artifact XML tags. Use the Write tool to create HTML files directly (e.g. index.html, landing.html).TodoWrite: Use a short numbered plan in your reply instead. Update the user on progress as you go./frames/ paths: Device frame HTML files are not available. Inline device chrome (status bar, home indicator, notch) directly in the HTML when building mobile/tablet prototypes.$OD_NODE_BIN, $OD_BIN, od media generate: Not available. This skill covers HTML design only — do not attempt to call daemon CLI commands.references/design-systems/<slug>/ and references/design-templates/<slug>/ inside this skill directory.| File | Content |
|---|---|
references/01-core-directives.md | Discovery protocol, 3 core rules, design philosophy |
references/02-identity-workflow.md | Designer identity, output guidelines, artifact rules |
references/03-direction-library.md | 5 built-in direction palettes with OKLch tokens |
references/04-deck-framework.md | Fixed deck framework (nav, counter, print-to-PDF) |
references/design-systems.md | 150+ brand design systems catalog |
references/design-templates.md | 110+ design templates catalog with descriptions |
references/01-core-directives.md — the 3 hard rules (discovery, brand branching, plan)references/02-identity-workflow.md — designer identity, output guidelinesreferences/03-direction-library.mdreferences/04-deck-framework.mdreferences/design-systems.md, then references/design-systems/<slug>/DESIGN.md + tokens.cssreferences/design-templates.md, then references/design-templates/<slug>/SKILL.md + assets/template.htmlRead references/design-systems/<slug>/DESIGN.md, paste references/design-systems/<slug>/tokens.css :root block verbatim into the HTML's first <style>, reference references/design-systems/<slug>/components.html for shapes. Never invent tokens outside the palette.
Read references/design-templates/<slug>/SKILL.md and references/design-templates/<slug>/assets/template.html. Copy seed verbatim, bind tokens, fill content. Never write from scratch when a seed exists.
To sync the latest design systems and templates from open-design:
./scripts/sync.sh
Plan-first development workflow. Grill the idea, write one plan.md, then implement it phase by phase. Use this skill whenever the user wants to: stress-test a design, write or review an implementation plan, add or resolve review comments, track phased implementation progress, or audit open review threads. Also use when the user says things like "let's think this through", "poke holes in this", "what am I missing", "plan this out", or wants disciplined, reviewed code changes. Flow: Grill → Plan → Impl (phase by phase).
Multi-perspective code review using adversarial subagent debate. Spawns parallel reviewer agents (bug hunter, security auditor, architecture critic, correctness prover) that independently analyze the current branch diff, then consolidates and debates findings to produce a severity-ranked HTML report with near-zero false positives. Use when the user says "review", "code review", "review my changes", "check this PR", "find bugs", "audit this branch", or wants a thorough quality check before merging.
Stress-test an idea, design, or approach through sharp, structured interrogation. One question at a time, each with a recommended answer. Probes assumptions, edge cases, hidden dependencies, and fuzzy language until the design is either solid or abandoned. Use when the user says "grill this", "stress-test", "poke holes", "challenge this", "what am I missing", "what could go wrong", "devil's advocate", or wants their thinking pressure-tested before committing to it.
Manage files on an OpenList (AList-compatible) cloud storage server. Use when the user wants to list, search, copy, move, rename, delete, upload, or download files on cloud storage managed by OpenList/AList. Triggers on phrases like "openlist", "alist", "manage cloud storage", "network drive", or file operations against a self-hosted file server. Also use when the user mentions Emby, Jellyfin, or media library organization on cloud storage.
Create robust Python automation with full logging and safety checks. Use when tasks need complex data processing, authenticated API work, conditional file operations, or error handling beyond simple shell commands.
Improve existing code at any scale — from cleaning up a single function to restructuring an entire module hierarchy. Use this skill whenever the user wants to simplify code, refactor for readability, find architectural improvements, consolidate tightly-coupled modules, deepen shallow abstractions, reduce complexity, clean up after a feature implementation, or make a codebase more testable and navigable. Triggers on phrases like 'simplify this', 'clean up', 'refactor', 'improve architecture', 'make this cleaner', 'find refactoring opportunities', 'reduce complexity', or any request to improve code quality without changing behavior.