UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Asks one clarifying question at a time, then builds two or three single-file HTML prototypes checked across phone, tablet, and desktop widths.
SKILL.md written in Chinese; this summary is our English description.
Install Frontend Prototype Workflow
$ npx skills add huiliyi37/Tianshu-harness --skill design-prototype -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install huiliyi37/Tianshu-harness design-prototype --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/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/design/skills/design-prototype .claude/skills/design-prototype && 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-prototype" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/plugins/design/skills/design-prototype into .claude/skills/design-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-prototype", 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/huiliyi37/Tianshu-harness/tree/main/plugins/design/skills/design-prototypeType 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 huiliyi37/Tianshu-harness --skill design-prototype -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install huiliyi37/Tianshu-harness design-prototype --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/design/skills/design-prototype .agents/skills/design-prototype && 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-prototype" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/plugins/design/skills/design-prototype into .agents/skills/design-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-prototype", 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 huiliyi37/Tianshu-harness --skill design-prototype -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install huiliyi37/Tianshu-harness design-prototype --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/design/skills/design-prototype .cursor/skills/design-prototype && 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-prototype" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/plugins/design/skills/design-prototype into .cursor/skills/design-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-prototype", 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/huiliyi37/Tianshu-harness.git --path plugins/design/skills/design-prototype--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 huiliyi37/Tianshu-harness --skill design-prototype -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install huiliyi37/Tianshu-harness design-prototype --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/design/skills/design-prototype .gemini/skills/design-prototype && 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-prototype" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/plugins/design/skills/design-prototype into .gemini/skills/design-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-prototype", 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 huiliyi37/Tianshu-harness design-prototypeInstalls 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 huiliyi37/Tianshu-harness --skill design-prototype -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/design/skills/design-prototype .github/skills/design-prototype && 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-prototype" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/plugins/design/skills/design-prototype into .github/skills/design-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-prototype", 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 huiliyi37/Tianshu-harness --skill design-prototype -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install huiliyi37/Tianshu-harness design-prototype --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/huiliyi37/Tianshu-harness.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/design/skills/design-prototype .opencode/skills/design-prototype && 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-prototype" agent skill from https://github.com/huiliyi37/Tianshu-harness/tree/main/plugins/design/skills/design-prototype into .opencode/skills/design-prototype/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-prototype", 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-prototype- GitHub stars
- 1.1k
- Token cost
- ~415 tokens
- SKILL.md length
- 138 words
- Files
- 1
- Skills in repo
- 7
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Asks one clarifying question at a time, then builds two or three single-file HTML prototypes checked across phone, tablet, and desktop widths.
- Works in 5 steps: 意图澄清（单问约束） → 探索 2–3 个视觉方向 → 多视口自检（必做） → …
- Exploring two or three visual directions for a new interface
- SKILL.md covers 工作流, 工具速查 and 反模式
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
This skill follows a staged process for frontend UI prototypes: when the target users, core action, brand tone, or reference material is unclear, it asks exactly one focused question rather than several at once. It then builds two or three visual directions, each as one HTML file with inline styling, semantic markup, basic accessibility, and a mobile-first layout extended for desktop with media queries.
Every direction gets checked at three screen widths before moving on, fixing overflow or undersized text first. When a reference image is supplied, it pulls a color palette from it into reusable variables and runs a pixel comparison against the build, repeating until the mismatch is small. Delivery requires the width screenshots and the audit result as evidence, not a spoken claim that the layout works.
When your agent uses it
- Exploring two or three visual directions for a new interface
- Checking a built prototype for mobile, tablet, and desktop issues
- Matching a new interface's colors and layout to a reference screenshot
Example prompts
- “Design two directions for this signup page and check them on mobile.”
- “Match this prototype's colors to the reference screenshot I sent.”
- “Audit this HTML prototype for overflow at phone width.”
Requirements
- Chrome installed, or a configured Chrome path, for the preview and audit tools
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit edbc984. 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.
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
Frontend Prototype Workflow loads about 415 tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 138 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 huiliyi37/Tianshu-harness at commit edbc984, republished under its Apache-2.0 licence (© huiliyi37). 138 words, ~415 tokens.
Download SKILL.mdSave it as
.claude/skills/design-prototype/SKILL.md (or your agent's skills folder).- name
- design-prototype
- description
- Frontend UI prototype workflow — clarify intent, explore directions, preview across viewports, diff against references, deliver with screenshot evidence
- triggers
- 设计, UI, 原型, landing, 界面, mockup, prototype, dashboard, 首页, 落地页, wireframe, 视觉, layout
Design Prototype（前端设计原型）
对标 Codex Product Design 插件的方法论，适配天枢交付纪律。
工作流
1. 意图澄清（单问约束）
开始动手前，若以下任一项不明，只问一个最关键的问题：
- 目标用户与核心动作（注册？购买？浏览？）
- 品牌调性（极简 / 企业 / playful / 暗色）
- 有无参考（竞品截图、Figma 链接描述、色板）
不要一次抛多个选择题。
2. 探索 2–3 个视觉方向
每个方向输出单文件 HTML 原型：
- 内联 CSS（无构建步骤，即开即预览）
- 语义化 HTML + 基础可访问性（label、alt、focus 可见）
- 真实文案占位（不用 lorem 堆砌——用场景化假数据）
- 移动端优先，desktop 用 media query 扩展
文件命名：prototype-{direction}.html（如 prototype-minimal.html）
3. 多视口自检（必做）
每个方向完成后：
ui_preview— mobile / tablet / desktop 三视口截图ui_responsive_audit— 抓横向溢出、过小点击区、过小字号
有问题先修 HTML，再进入下一步。不要带着 overflow 交付。
4. 参考对齐（有 mockup 时）
用户提供参考图或竞品截图时：
ui_palette— 从参考图提取色板，写入 CSS variables- 实现后
ui_diff— 与参考/mockup 像素对比，目标 mismatch < 5% - mismatch > 5% 必须迭代，不能口头说「差不多」
5. 交付纪律（复现即证明）
交付设计任务时必须附带：
- 至少一组三视口
ui_preview截图路径 ui_responsive_audit结果（零 high 级 issue，或明确列出已知遗留）- 若有参考：最新
ui_diffmismatch 百分比
口头描述「已经 responsive 了」不算交付。
工具速查
| 工具 | 何时用 |
|---|---|
ui_preview | HTML/URL → 多视口 PNG |
ui_diff | 实现 vs 参考 mockup |
ui_palette | 参考图 → CSS/Tailwind tokens |
ui_responsive_audit | 布局问题清单 + 截图 |
反模式
- 不要跳过 preview 直接改 CSS 猜效果
- 不要用
<table>做整页布局（2020 年代前的 hack） - 不要在未装
tianshu-design插件时会话里调用上述工具——先/plugin install或让用户安装 - Chrome 未安装时工具会返回明确错误；提示用户安装 Chrome 或设置
CHROME_PATH
© huiliyi37, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in plugins/design/skills/design-prototype of huiliyi37/Tianshu-harness.
Open the folder on GitHubat commit edbc984
Compare with similar skills
Frontend Prototype Workflow 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 |
|---|---|---|---|---|---|---|
| Frontend Prototype Workflow this skillhuiliyi37/Tianshu-harness | 1.1k | — | ~415 | Automated safety check: Pass | Apache-2.0 | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Material 3hamen/material-3-skill | 1.5k | 2 repos | ~7.8k | Automated safety check: Pass | MIT | |
| Antislop Layoutmobilemiqdadbadjuber/anti-slop | 4.8k | 1 repos | ~4.1k | Automated safety check: Pass | MIT | |
| Stitch Build Loopgoogle-labs-code/stitch-skills | 8.4k | 5 repos | ~2.6k | Automated safety check: Notes | Apache-2.0 |
Similar skills
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
Material 3
hamen/material-3-skill
Implement Google's Material Design 3 (Material You) UI system.
Antislop Layoutmobile
miqdadbadjuber/anti-slop
Mobile layout skill for antislop. An agent skill from miqdadbadjuber/anti-slop.
- Official
Stitch Build Loop
google-labs-code/stitch-skills
Builds a website page by page with Stitch in an autonomous loop, passing a baton file from one iteration to the next that names the next page and prompt.
Variate Design Variations
Nutlope/variate
Puts four real design variations of one project file on your localhost behind a small card you flip with the arrow keys, then acts on your verdict.
More from huiliyi37/Tianshu-harness
Agent Harness Testing Methodology
huiliyi37/Tianshu-harness
Guides an agent through probing an unfamiliar project's test setup, then choosing a red-light-first testing strategy matched to the task type.
Visual Acceptance Review
huiliyi37/Tianshu-harness
Chinese-language final-check method for UI visual changes before delivery, using multi-theme screenshot matrices, pixel-level evidence and a CSS cascade checklist.
Word Document Generator
huiliyi37/Tianshu-harness
Generates and reads Word (.docx) documents such as reports, contracts and bids from heading, paragraph, table, code and list blocks, with a centered title.
Office Excel
huiliyi37/Tianshu-harness
Excel 电子表格读写与编辑最佳实践 — 用 xlsxread/xlsxwrite/xlsxedit 处理 .xlsx 时遵守的公式、数字格式与可维护性纪律
Office PDF Generator and Reader
huiliyi37/Tianshu-harness
Generates formal PDFs from structured content blocks with automatic CJK font handling and page numbers, and reads text back out of existing PDFs.
Office PPT Design Rules
huiliyi37/Tianshu-harness
Sets design rules for building PowerPoint decks with the pptx_create and pptx_read tools: a dominant color, varied layouts, readable type and a read-back check.
Related
Categories
Questions about Frontend Prototype Workflow
What does Frontend Prototype Workflow do?
Asks one clarifying question at a time, then builds two or three single-file HTML prototypes checked across phone, tablet, and desktop widths. This skill follows a staged process for frontend UI prototypes: when the target users, core action, brand tone, or reference material is unclear, it asks exactly one focused question rather than several at once. It then builds two or three visual directions, each as one HTML file with inline styling, semantic markup, basic accessibility, and a mobile-first layout extended for desktop with media queries.
When should I use Frontend Prototype Workflow?
Frontend Prototype Workflow fits situations like: exploring two or three visual directions for a new interface; checking a built prototype for mobile, tablet, and desktop issues; matching a new interface's colors and layout to a reference screenshot.
How do I install Frontend Prototype Workflow in Claude Code?
Run `npx skills add huiliyi37/Tianshu-harness --skill design-prototype -a claude-code`. Or copy the skill folder (plugins/design/skills/design-prototype in huiliyi37/Tianshu-harness) into .claude/skills/design-prototype in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Prototype Workflow in Codex?
Run `npx skills add huiliyi37/Tianshu-harness --skill design-prototype -a codex`. Or copy the skill folder (plugins/design/skills/design-prototype in huiliyi37/Tianshu-harness) into .agents/skills/design-prototype in your project. Codex loads it when a task matches its description.
Can I use Frontend Prototype Workflow 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 huiliyi37/Tianshu-harness --skill design-prototype -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-prototype, .gemini/skills/design-prototype, .github/skills/design-prototype and .opencode/skills/design-prototype in your project.
What does Frontend Prototype Workflow need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Prototype Workflow is instructions for the agent only. Our summary lists: Chrome installed, or a configured Chrome path, for the preview and audit tools.
Does Frontend Prototype Workflow 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 Frontend Prototype Workflow 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 Frontend Prototype Workflow use?
Frontend Prototype Workflow is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Prototype Workflow use?
About 415 tokens (SKILL.md is roughly 1.7k 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 Frontend Prototype Workflow?
Skills that share tags, products or a category with Frontend Prototype Workflow: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Material 3 (hamen/material-3-skill, 1.5k stars) and Antislop Layoutmobile (miqdadbadjuber/anti-slop, 4.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Prototype Workflow?
huiliyi37 (a GitHub user) maintains it in huiliyi37/Tianshu-harness, which has 1,067 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 8, 2026.
Source: huiliyi37/Tianshu-harness on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.