Preview
hanamizuki/solopreneur
Create an interactive HTML preview of any proposal, plan, idea, doc, brief, or spec and land it in the browsable local Preview Library by default (opens under file:// with a catalog sidebar and…
A skill your agent uses 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…
Install Design It
$ npx skills add smallnest/goal-workflow --skill design-it -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install smallnest/goal-workflow design-it --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-it .claude/skills/design-it && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "design-it" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/design-it into .claude/skills/design-it/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-it", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/smallnest/goal-workflow/tree/master/skills/design-itType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add smallnest/goal-workflow --skill design-it -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install smallnest/goal-workflow design-it --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-it .agents/skills/design-it && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-it" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/design-it into .agents/skills/design-it/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-it", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add smallnest/goal-workflow --skill design-it -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install smallnest/goal-workflow design-it --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-it .cursor/skills/design-it && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-it" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/design-it into .cursor/skills/design-it/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-it", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/smallnest/goal-workflow.git --path skills/design-it--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add smallnest/goal-workflow --skill design-it -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install smallnest/goal-workflow design-it --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-it .gemini/skills/design-it && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-it" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/design-it into .gemini/skills/design-it/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-it", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install smallnest/goal-workflow design-itInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add smallnest/goal-workflow --skill design-it -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-it .github/skills/design-it && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-it" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/design-it into .github/skills/design-it/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-it", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add smallnest/goal-workflow --skill design-it -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install smallnest/goal-workflow design-it --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/smallnest/goal-workflow.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-it .opencode/skills/design-it && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-it" agent skill from https://github.com/smallnest/goal-workflow/tree/master/skills/design-it into .opencode/skills/design-it/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-it", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-it- GitHub stars
- 289
- Token cost
- ~1.1k tokens
- SKILL.md length
- 481 words
- Files
- 2
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- MIT
At a glance
A skill your agent uses 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…
- Works in 5 steps: Copy the template. Start from… → Gather real content first. Section… → Fill the skeleton. Rename/reorder s to… → …
- Turning a requirement
- SKILL.md covers Overview, When to Use, Workflow and House-Style Rules…, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design It is an agent skill from smallnest/goal-workflow. 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.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.
It sits in Frontend & Design, covering HTML artifacts, Test generation and Diagrams. It works with SQL. The repository describes itself as: AI-driven development workflow with /prd, /goal, /review-it and /ship-it skills. The licence is MIT.
When your agent uses it
- Turning a requirement
- 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
Example prompts
- “/design-it”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Copy the template. Start from template.html in this skill's directory. Do not hand-roll the / — copy it whole.
- Gather real content first. Section titles, field names, SQL, file:line code positions, protoIds — all must come from the actual…
- Fill the skeleton. Rename/reorder s to fit the feature. Keep the section kinds: 已对齐结论 → 业务规则 → 架构图 → 时序 → 数据模型 → 契约 → 清单 → 幂等降级 → 测试用例 →…
- Keep TOC and sections in sync. Every needs a matching , and vice versa. This is the #1 breakage — verify at the end (see Quick Reference).
- Save as docs/<需求名>.html. Don't commit unless asked.
What it can do on your machine
Read from SKILL.md and the folder at commit b06ab3c. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are bash).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Design It loads about 1.1k tokens when it runs. Until then it costs about 98 tokens; SKILL.md has 481 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from smallnest/goal-workflow at commit b06ab3c, republished under its MIT licence (© smallnest). 481 words, ~1,055 tokens.
Download SKILL.mdSave it as
.claude/skills/design-it/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- design-it
- description
- 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.
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.
Show full SKILL.md (210 more words)Show less
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© smallnest, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in skills/design-it of smallnest/goal-workflow.
- SKILL.md
- template.html
Open the folder on GitHubat commit b06ab3c
Compare with similar skills
Design It next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design It this skillsmallnest/goal-workflow | 289 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Previewhanamizuki/solopreneur | 152 | — | ~5.2k | Automated safety check: Pass | MIT | |
| Show Metellahq/opensession | 392 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Generative UIhimself65/finance-skills | 3.4k | — | ~3.1k | Automated safety check: Pass | MIT | |
| Show Memirumee/nimara-ecommerce | 129 | 7 repos | ~809 | Automated safety check: Pass | BSD-3-Clause | |
| Concept DiagramsTommy-yw/RunbookHermes | 546 | 3 repos | ~4.3k | Automated safety check: Pass | MIT |
Similar skills
Show Me
tellahq/opensession
Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
Generative UI
himself65/finance-skills
Design system and templates for Claude's built-in generative UI — the showwidget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations.
Show Me
mirumee/nimara-ecommerce
Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
Concept Diagrams
Tommy-yw/RunbookHermes
Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark…
Database Scout
zebbern/claude-code-guide
Explore SQLite and PostgreSQL databases: list tables, inspect schemas (columns/types/constraints), preview data, generate Mermaid ER diagrams, and run safe read-only queries.
More from smallnest/goal-workflow
All 20 skills in this repoArticle Icons
smallnest/goal-workflow
Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons.
Graph
smallnest/goal-workflow
Graph engineering for parallel task execution: convert a task, PRD, SPEC, or issue set into a dependency graph (DAG), layer it into supersteps, then implement each independent node concurrently with…
Walkthrough
smallnest/goal-workflow
Generate a Phase-2 Walkthrough artifact (walkthrough.md) once implementation and verification are complete.
Insight Diagram
smallnest/goal-workflow
为任意项目生成 UML 图、架构图和流程图。分析代码库后让用户选择要生成的图表类型，使用 architecture-diagram skill 渲染为 HTML+SVG，保存到 docs/ 目录。适用于任何软件项目的文档可视化。
Code To Spec
smallnest/goal-workflow
Reverse-engineer a SPEC document from an existing project. An agent skill from smallnest/goal-workflow.
Humanize It
smallnest/goal-workflow
对指定文档进行去 AI 味的改写。自动选择最合适的人性化策略（humanizer-zh / humanize-chinese / technical-writing）， 迭代改写直到效果达标或迭代 42 次为止。适用于中文文本的去 AI 化处理，包括通用文章、技术文档、学术论文等。
Related
Works with
Categories
Questions about Design It
What does Design It do?
A skill your agent uses 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…. Design It is an agent skill from smallnest/goal-workflow. 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.
When should I use Design It?
Design It fits situations like: turning a requirement; 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.
How do I install Design It in Claude Code?
Run `npx skills add smallnest/goal-workflow --skill design-it -a claude-code`. Or copy the skill folder (skills/design-it in smallnest/goal-workflow) into .claude/skills/design-it in your project. Claude Code loads it when a task matches its description.
How do I install Design It in Codex?
Run `npx skills add smallnest/goal-workflow --skill design-it -a codex`. Or copy the skill folder (skills/design-it in smallnest/goal-workflow) into .agents/skills/design-it in your project. Codex loads it when a task matches its description.
Can I use Design It in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add smallnest/goal-workflow --skill design-it -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-it, .gemini/skills/design-it, .github/skills/design-it and .opencode/skills/design-it in your project.
What does Design It need to run?
SKILL.md names no scripts, command-line tools or credentials: Design It is instructions for the agent only.
Does Design It access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design It safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Design It use?
Design It is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design It use?
About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design It?
Skills that share tags, products or a category with Design It: Preview (hanamizuki/solopreneur, 152 stars), Show Me (tellahq/opensession, 392 stars), Generative UI (himself65/finance-skills, 3.4k stars) and Show Me (mirumee/nimara-ecommerce, 129 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design It?
smallnest (a GitHub user) maintains it in smallnest/goal-workflow, which has 289 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on September 13, 2026.
Source: smallnest/goal-workflow on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.