frontend-design-system
Skill0 starsChanged 29 days agoMITView on GitHub
前端界面一键生成技能，固化用户专属设计系统。设计任何 Web 前端页面、聊天界面、设置页、三栏工作台时使用；触发词：设计前端、前端页面、UI 设计、聊天界面、设置页、工作台、深色模式、主题、设计系统。含暖米白纸感色板、方圆结合圆角体系、Qoder 式聊天交互（流式无气泡/圆头像/TRAE 回退/0.1s 计时/工具审批卡/任务过程面板）、真实设置页规范、无头 Edge 截图验证流程。
9 other projects use a version of this.
Adopted by
Most recently taken up by
- AntonioMellies/claude-code-skillstheir own version, first seen Nov 1, 2026
- hushh-labs/hushh-researchtheir own version, first seen Nov 1, 2026
- gongyijie85/dsh-ecctheir own version, first seen Oct 13, 2026
- wangge-ai/wangge-skillstheir own version, first seen Oct 8, 2026
- mnzralee/claude-multi-agent-architecturetheir own version, first seen Oct 3, 2026
- polyant-ai/polyanttheir own version, first seen Sep 11, 2026
Used with
Projects with it also use verification.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
OpenAISkillverification
Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server start and 'why isn't this working' signals.
Also in 3 projects that use this
Other versions9 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 9
- oikon48/cc-frontend-skills★ 69same name
- hushh-labs/hushh-research★ 40same name
- polyant-ai/polyant★ 10same name
- gongyijie85/dsh-ecc★ 8same name
- mnzralee/claude-multi-agent-architecture★ 8same name
- sefaertunc/Worclaude★ 4same name
- wangge-ai/wangge-skills★ 4same name
- AntonioMellies/claude-code-skills★ 2same name
- sefaertunc/anthropic-watch★ 1same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository7 other files it gives its agents.
- docx-cnSkill
- excelSkill
- model-api-referenceSkill
- pdf-intelligence-suiteSkill
- qoder-agent-sdk-skillSkill
- self-improvementSkill
- ui-designerSkill
The file
Files
前端设计系统（Paper UI）
Overview
一键生成符合用户固定审美与交互习惯的前端界面。核心主张：暖米白纸感底色、方圆结合圆角（方角面板 + 单角切直的气泡）、克制的墨黑+赤陶双色、所有开关即时生效、删除回退必弹窗确认、无头 Edge 截图实测验收。
工作流（按序执行）
1. 确认设计语言（动手前）
向用户确认三件事：色板基调（默认暖米白纸感）、明暗（默认浅色）、圆角风格（默认方圆结合）。无异议则直接用默认值，不要追问。
2. 先建设计系统，再写组件（禁止跳过）
- 若用 React+Vite+Tailwind：先
tailwind.config.ts+src/index.css定义全部令牌（HSL CSS 变量），组件中禁止出现裸色类（text-white/bg-blue-500 一律用令牌）。 - 色板、圆角、字体、阴影令牌值 →
references/design-tokens.md，直接照抄。 - 主题预设（森林/薄荷/蜜蜂/羊皮纸）与亮暗切换 → 同一文件，真实覆写 CSS 变量。
3. 布局
- 三栏工作台（项目栏/主区/终端）尺寸与侧栏滑推动画 →
references/design-tokens.md布局段。 - 聊天主区列宽默认 880px（紧凑 640/宽松 1040 可切换）。
- 窄窗（<1100px）自动收起右侧终端；原生滚动条一律
.no-scrollbar隐藏。
4. 聊天交互（用户已固化的形态，必须全做）
→ references/chat-patterns.md：流式无气泡 Agent 输出、0.1s 精度计时、圆头像+三操作键（复制/删除/回退）、删除回退弹窗确认、工具审批卡（批准/拒绝/在终端运行）、任务过程面板（思考+调用+spinner）、输入框（红框、虚线下移、执行域/权限/模型下拉、回形针附件独立等宽区、向上箭头发送键、任务进行中可再发定制干预）。
5. 设置页
→ references/settings-patterns.md：全屏覆盖层+退出动画、hash 导航、内容必须换成当前项目的真实情况（严禁照搬其他产品的设置项）、所有开关必须真实接线（禁占位）、Toggle 用主题 accent 色不用绿色。
6. 验收（不通过不收工）
→ references/verification.md：npm run build + scripts/shot.mjs 无头 Edge 截图 + DOM 断言交互。用户偏好少开真窗，一律用无头方案。
关键红线（违反即返工）
- 面板/按钮 2px 方角，气泡 14px 圆角但必须有一个角切直，chip 胶囊形——拒绝千篇一律大圆角。
- Agent 消息无头像、无气泡；用户消息必须有圆头像（贴气泡右侧）。
- 一切删除/回退操作弹窗确认；输入框边框用主题红（destructive/accent）。
- 设置项禁止占位；禁止抄袭其他产品的设置内容，按当前项目真实功能重组。
- 每批改动必须实际验证：构建 + 无头截图 + 交互断言，三者全绿才算完成。
Resources
references/design-tokens.md— 色板/主题预设/圆角/字体/阴影/布局全部令牌值与 Tailwind 配置references/chat-patterns.md— 聊天区与输入框的完整交互规格（含组件结构与状态设计）references/settings-patterns.md— 设置页结构规范与 React 受控组件陷阱references/verification.md— 无头 Edge 截图/验证脚本用法与踩坑记录scripts/shot.mjs— 无头 Edge 截图脚本模板（拷贝到项目 scripts/ 后用）
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.