design-it
Use when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents, architecture/sequence SVG diagrams, code/SQL/YAML blocks, callout boxes, an aligned-decisions (已对齐结论) panel, test cases, and a code index. Reuse for any new 需求/设计文档 that should look identical every time.
- Installs
- 155
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/smallnest/goal-workflow --skill design-it- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads design-it automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
design-it
Overview
Generate a technical design document as one self-contained HTML file in a fixed house style, so every new 需求 produces a visually identical page. The look is not improvised each time — it comes from a fixed <style> block and a fixed section skeleton. Your job is to fill content into that skeleton, never to redesign it.
Core principle: Copy template.html verbatim, then replace only the content. Keep the <style> block byte-for-byte. Consistency comes from not touching the design system.
When to Use
- The user gives a new requirement / spec / feature and wants a design doc.
- Converting a
.mdtechnical spec into the shareable HTML form. - Any request like "生成同样的 html / 用这套模板 / 出一份设计文档".
When NOT to use: quick throwaway notes, a real Markdown deliverable the user wants to stay Markdown, or slide decks.
Workflow
- Copy the template. Start from
template.htmlin this skill's directory. Do not hand-roll the<head>/<style>— copy it whole. - Gather real content first. Section titles, field names, SQL,
file:linecode positions, protoIds — all must come from the actual requirement doc and codebase. Read the code; do not invent identifiers. If a fact is unknown, mark it<span class="pill todo">待确认</span>, never guess. - Fill the skeleton. Rename/reorder
<section>s to fit the feature. Keep the section kinds: 已对齐结论 → 业务规则 → 架构图 → 时序 → 数据模型 → 契约 → 清单 → 幂等降级 → 测试用例 → 代码索引 → 变更记录. Drop what doesn't apply; add feature-specific ones in the same style. - Keep TOC and sections in sync. Every
<a href="#x">needs a matching<section id="x">, and vice versa. This is the #1 breakage — verify at the end (see Quick Reference). - Save as
docs/<需求名>.html. Don't commit unless asked.
House-Style Rules (non-negotiable)
| Element | Rule |
|---|---|
<style> block | Copy verbatim. Never restyle. Colors come from :root CSS variables only. |
| Code / SQL / YAML | Always the template's <pre style="background:#f8fafc;...">. Inside <pre>, escape <→<, >→>, &→&. Unescaped < silently eats content. |
| Callout boxes | .note (橙, 提醒/易错), .tip (蓝, 正向补充), .warn (红, 风险). Use the right color for the meaning. |
| Diagrams | Hand-authored inline <svg> inside <figure>; text uses .svg-t/.svg-s/.svg-title; node fills use :root vars (var(--new-bg) etc.), matching the .legend. |
| Intro | Each section opens with one <p class="lead"> stating what it answers. |
| Pills | .pill.new/.old/.infra/.mq/.prod/.tech/.done/.todo for status tags — reuse, don't invent classes. |
| Tables | Plain <table> — the CSS handles zebra striping and header shading. |
| Lang | <html lang="zh">; body copy in the doc's language (usually 中文). |
Common Mistakes
- Redesigning the CSS. The whole point is identical output — don't "improve" colors, spacing, or fonts. Copy
<style>untouched. - Unescaped angle brackets in
<pre>.List<String>renders as a broken tag. Escape toList<String>. - Dead TOC links. Adding a section without its TOC entry (or renaming an
idand forgetting thehref). Always cross-check. - Inventing code positions.
file:line, table names, protoIds must be read from the repo. Unknown →待确认pill, not a plausible-looking guess. - Making it a proposal. Keep it a design doc (what/how, locked decisions), not a persuasive pitch.
Quick Reference — final self-check
f="docs/<需求名>.html"
# TOC hrefs vs section ids must match exactly (no output = perfect):
diff <(grep -oE 'href="#[a-z0-9-]+"' "$f" | sed 's/.*#//;s/"//' | sort -u) \
<(grep -oE '<section id="[a-z0-9-]+"' "$f" | sed 's/.*"//' | sort -u)
# open in browser to eyeball diagrams + code blocks render cleanly
FAQ
What does the design-it skill do?
Use when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents, architecture/sequence SVG diagrams, code/SQL/YAML blocks, callout boxes, an aligned-decisions (已对齐结论) panel, test cases, and a code index. Reuse for any new 需求/设计文档 that should look identical every time.
How do I install design-it?
Run npx skills add https://github.com/smallnest/goal-workflow --skill design-it in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-it/ (personal) or .claude/skills/design-it/ (project).
Which AI agents can use design-it?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is design-it safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains design-it?
It is published by smallnest in smallnest/goal-workflow. It has 155 recorded installs.
More from smallnest/goal-workflow
smell
smallnest/goal-workflow
Detect software architecture bad smells, algorithmic complexity hotspots, and anti-patterns in a codebase. Produces a detailed markdown report identifying violations of architectural principles, design patterns, code quality, and performance complexity. Triggers on: smell, code smell, architecture smell, find anti-patterns, detect bad smells, complexity analysis, 代码坏味道, 架构坏味道, 反模式, 找出坏味道, 复杂度分析.
prd
smallnest/goal-workflow
Generate a Product Requirements Document (PRD) for a new feature. Use when planning a feature, starting a new project, or when asked to create a PRD. After PRD is confirmed, use /prd-to-spec (optional) for technical design, then /to-issues to create implementable tickets. Triggers on: create a prd, write prd for, plan this feature, requirements for, spec out, 写PRD, 需求文档, 需求分析, 规格说明.
humanize-it
smallnest/goal-workflow
对指定文档进行去 AI 味的改写。自动选择最合适的人性化策略（humanizer-zh / humanize-chinese / technical-writing）， 迭代改写直到效果达标或迭代 42 次为止。适用于中文文本的去 AI 化处理，包括通用文章、技术文档、学术论文等。 Use when user says: "humanize this", "去AI味", "降AIGC", "人性化改写", "改成人话", "去除AI痕迹", "humanize document", "make text human-like", "去机器味", "降低AI率", "过AIGC检测"
insight-diagram
smallnest/goal-workflow
为任意项目生成 UML 图、架构图和流程图。分析代码库后让用户选择要生成的图表类型，使用 architecture-diagram skill 渲染为 HTML+SVG，保存到 docs/ 目录。适用于任何软件项目的文档可视化。
refactor
smallnest/goal-workflow
Expert code refactoring based on Martin Fowler's catalog — improve maintainability without changing behavior. Covers code smells, composing methods, moving features, organizing data, simplifying conditionals, method calls, and generalization. Triggers on: refactor, 重构, clean up, improve code, code smell, extract method, rename, simplify.
modern-go
smallnest/goal-workflow
Modernize Go code by applying version-appropriate idioms and APIs (gofix-style transformations). Scans go.mod for the Go version, then transforms Go source files to use modern patterns—from Go 1.0 through 1.26+. Use when the user says "现代化","现代Go语言", "地道的", "idiomatic", "modernize", "modern-go", "update Go code", "gofix", or wants to upgrade Go idioms.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.