Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Plan 模式的视觉设计分支。基于需求选择视觉方向，再结合业务页面规划维护 build-plan.json 的 visualStyle，供 CLI 派生 design.md。
Install Yida Design Plan
$ npx skills add openyida/openyida --skill yida-design-plan -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install openyida/openyida yida-design-plan --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/openyida/openyida.git skills-src && mkdir -p .claude/skills && cp -r skills-src/yida-skills/skills/yida-design/sub_skill/yida-design-plan .claude/skills/yida-design-plan && 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 "yida-design-plan" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan into .claude/skills/yida-design-plan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-design-plan", 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/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-planType 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 openyida/openyida --skill yida-design-plan -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install openyida/openyida yida-design-plan --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .agents/skills && cp -r skills-src/yida-skills/skills/yida-design/sub_skill/yida-design-plan .agents/skills/yida-design-plan && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "yida-design-plan" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan into .agents/skills/yida-design-plan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-design-plan", 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 openyida/openyida --skill yida-design-plan -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install openyida/openyida yida-design-plan --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/yida-skills/skills/yida-design/sub_skill/yida-design-plan .cursor/skills/yida-design-plan && 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 "yida-design-plan" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan into .cursor/skills/yida-design-plan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-design-plan", 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/openyida/openyida.git --path yida-skills/skills/yida-design/sub_skill/yida-design-plan--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 openyida/openyida --skill yida-design-plan -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install openyida/openyida yida-design-plan --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/yida-skills/skills/yida-design/sub_skill/yida-design-plan .gemini/skills/yida-design-plan && 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 "yida-design-plan" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan into .gemini/skills/yida-design-plan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-design-plan", 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 openyida/openyida yida-design-planInstalls 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 openyida/openyida --skill yida-design-plan -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .github/skills && cp -r skills-src/yida-skills/skills/yida-design/sub_skill/yida-design-plan .github/skills/yida-design-plan && 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 "yida-design-plan" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan into .github/skills/yida-design-plan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-design-plan", 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 openyida/openyida --skill yida-design-plan -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install openyida/openyida yida-design-plan --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openyida/openyida.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/yida-skills/skills/yida-design/sub_skill/yida-design-plan .opencode/skills/yida-design-plan && 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 "yida-design-plan" agent skill from https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan into .opencode/skills/yida-design-plan/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "yida-design-plan", 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
yida-design-plan- GitHub stars
- 220
- Token cost
- ~756 tokens
- SKILL.md length
- 132 words
- Files
- 25 (incl. scripts, references, assets)
- Skills in repo
- 58
- Repo updated
- First seen
- Licence
- MIT
At a glance
Plan 模式的视觉设计分支。基于需求选择视觉方向，再结合业务页面规划维护 build-plan.json 的 visualStyle，供 CLI 派生 design.md。
- Works in 5 steps: 读取 CLI 返回的 authoring-context.md 与… → 工作台沿用 PRD 的业务内容和表现建议。为每个真实自定义页填写… → 按 整体主题规则… → …
- Tasks that involve Design tokens
- SKILL.md covers 阶段一：提供视觉候选, 阶段二：完成页面视觉应用 and 校验失败时定点修复
What it does
Yida Design Plan is an agent skill from openyida/openyida. Plan 模式的视觉设计分支。基于需求选择视觉方向，再结合业务页面规划维护 build-plan.json 的 visualStyle，供 CLI 派生 design.md。
Its SKILL.md is about 760 tokens, which your agent loads only when the skill is triggered. The skill folder holds 28 other files, including scripts, reference files and assets (for example `agents/openai.yaml`, `assets/README.md` and `references/build-plan-compact-schema.md`).
It sits in Frontend & Design, covering Design tokens. The repository describes itself as: Your own personal YiDA AI assistant! The licence is MIT.
When your agent uses it
- Tasks that involve Design tokens
Example prompts
- “/yida-design-plan”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 读取 CLI 返回的 authoring-context.md 与 紧凑计划契约，沿用 pageId 和 sceneKey。
- 工作台沿用 PRD 的业务内容和表现建议。为每个真实自定义页填写 firstScreenFocus、layout、primaryAction、responsive 与 acceptanceChecks；前四项为具体非空说明，验收为非空字符串数组。公共主题不能代替这些决定。纯原生…
- 按 整体主题规则 核对导航、应用框架、原生表单、记录详情与自定义页面的配色、形状、文字、间距和状态。每项必须保留 visualMemoryApplications 数组；没有匹配的主题记忆点时填写 []，不要省略或写成字符串。按实际内容补页面局部差异与素材策略。完整主题由…
- 全局和局部 token 遵守 基础变量契约，明确项目差异写 visualStyle.tokens，主色写 forUser.colorStrategy.primaryColor；沿用主题的字号、间距和组件圆角。
- CLI 按 公共输出契约 生成 frontmatter、anchor 索引和五章正文，并调用同一 check-design 校验。缺少逐页决定时只保留可预览草稿，补齐后再生成最终产物；旧计划同样不得以继承主题套话补过门槛。
What it can do on your machine
Read from SKILL.md and the folder at commit b52e65e. 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
Ships 1 file in scripts/, which the agent can run.
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
Yida Design Plan loads about 756 tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 26 tokens; SKILL.md has 132 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); the scripts in this folder are not scanned.
SKILL.md
The full file from openyida/openyida at commit b52e65e, republished under its MIT licence (© openyida). 132 words, ~756 tokens.
Download SKILL.mdSave it as
.claude/skills/yida-design-plan/SKILL.md (or your agent's skills folder). This skill also uses 24 other files; get the full folder from GitHub.- name
- yida-design-plan
- description
- Plan 模式的视觉设计分支。基于需求选择视觉方向，再结合业务页面规划维护 build-plan.json 的 visualStyle，供 CLI 派生 design.md。
Plan 视觉设计
负责 Plan 的视觉候选与页面视觉应用。选型遵守 共享主题规则，与 Fast 和单页共用上层主题库。首轮仅保留整体风格或可调整建议，主题映射在规划准备补齐；需求确认后由 Plan 流程 启动页面视觉设计。
已有方案的配色、布局或页面设计调整，直接按 局部调整 修改相关视觉字段，跳过下面的首版流程。
阶段一：提供视觉候选
输入为共享的 .cache/openyida/<项目名>/requirement-brief.json。
已有明确的完整视觉方向、可信品牌规范、参考材料或应用主题时直接采用。除此之外，按设计方向比较生成恰好三套完整方向（两个模板方向和一个独立自由创意选项），并按视觉方向选择交给 yida-app 通过 ask_human 统一呈现；不再以“用户是否主动要求比较”作为触发条件。用户确认主题前只读主题索引中的精简风格摘要，不读取候选模板全文；确认后写入一致的 visualDirection、selectedTheme、colorStrategy 和导航结构，再读取选中的一份完整模板；模板方向的导航明暗由模板 navTheme 派生；自由创意按业务独立编写设计决策、导航明暗和 Token，不要求匹配模板。
阶段二：完成页面视觉应用
规划准备补齐视觉方向后，CLI 将基础主题、主题色和导航样式预填为标准 Plan 输入；模型仍须在业务页面确定后完成每个真实自定义页的具体视觉决定。按 CLI 返回的任务补齐，可以在同一轮业务规划中完成；两个片段分别保存。
- 读取 CLI 返回的
authoring-context.md与 紧凑计划契约，沿用 pageId 和 sceneKey。 - 工作台沿用 PRD 的业务内容和表现建议。为每个真实自定义页填写
firstScreenFocus、layout、primaryAction、responsive与acceptanceChecks；前四项为具体非空说明，验收为非空字符串数组。公共主题不能代替这些决定。纯原生表单应用不增加虚构页记录。 - 按 整体主题规则 核对导航、应用框架、原生表单、记录详情与自定义页面的配色、形状、文字、间距和状态。每项必须保留
visualMemoryApplications数组；没有匹配的主题记忆点时填写[]，不要省略或写成字符串。按实际内容补页面局部差异与素材策略。完整主题由 CLI 注入，复杂组件定制时再读模板对应章节。 - 全局和局部 token 遵守 基础变量契约，明确项目差异写
visualStyle.tokens，主色写forUser.colorStrategy.primaryColor；沿用主题的字号、间距和组件圆角。 - CLI 按 公共输出契约 生成 frontmatter、anchor 索引和五章正文，并调用同一
check-design校验。缺少逐页决定时只保留可预览草稿，补齐后再生成最终产物；旧计划同样不得以继承主题套话补过门槛。
用户选择整体暗色或黑色主题时，按 暗色主题浮层适配 补齐 visualStyle.tokens；内容界面明暗与导航明暗分别描述，导航明暗仍由所选主题模板确定。
首版提交前，将基础视觉与 pageApplications 一次补齐到已有 visual.json。仅超大需求需要中间展示时才按 按模块更新方案 提交。主流程负责生成方案、展示和确认，主题 CSS 使用 CLI 返回的 outputs.theme。
校验失败时定点修复
遇到 DESIGN_PLAN_PAGE_BINDINGS_REQUIRED 时，保留现有计划和预览，按以下顺序修复：
- 定位：读取错误
details.issues中每项的sourcePath、path和code，修改对应源文件。若问题来自business.json，先按已确认需求修正页面事实，再核对视觉绑定。 - 修改：以
business.json的facts.pages.customPageDetails为准，让visual.json的facts.visualStyle.forUser.pageApplications与自定义页一一对应；原生表单和数据模型不加入。按missing_page补项、unexpected_page移除多余绑定、duplicate_page合并重复项；按expected_array、expected_object、expected_nonempty_string修正指定字段。每项visualMemoryApplications必须为数组，无适用内容填[]。 - 回读并重试：确认修改已写入源文件，再重试原
materialize命令。写入失败、跳过或结果未知时，先回读核实，不能仅凭发起过工具调用认定修复完成。
修复仅涉及错误字段，保留 build-plan.json、business.json、visual.json 和已有预览；不因字段校验失败删除目录、重新 init、重写整份 PRD 或扩大需求范围。
本地校验失败统一按本地校验修复处理：先修正并回读源文件，未变化不重跑，连续两次修复无进展时保留产物并报告阻塞。
© openyida, 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 24 other files (scripts, references, assets) in yida-skills/skills/yida-design/sub_skill/yida-design-plan of openyida/openyida.
- SKILL.md
- agents/openai.yaml
- assets/README.md
- assets/build-plan-template.html
- assets/icons/business-flows.png
- assets/icons/data-models.png
- assets/icons/form-normal.svg
- assets/icons/form-process.svg
- assets/icons/graph-fit.svg
- assets/icons/graph-relations.svg
- assets/icons/graph-zoom-in.svg
- assets/icons/graph-zoom-out.svg
- assets/icons/overview.png
- assets/icons/pages.png
- assets/icons/visual-style.png
- references/build-plan-compact-schema.md
- references/build-plan-schema.md
- … and 8 more
Open the folder on GitHubat commit b52e65e
Compare with similar skills
Yida Design Plan 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 |
|---|---|---|---|---|---|---|
| Yida Design Plan this skillopenyida/openyida | 220 | — | ~756 | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Design SystemOhh-889/skyroc | 795 | 11 repos | ~1.7k | Automated safety check: Pass | MIT | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
Similar skills
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
More from openyida/openyida
All 58 skills in this repoYida Canvas Custom Page
openyida/openyida
宜搭自定义页面开发规范，使用 YidaCodeCanvas 组件实现现代 React18 自定义页面。用于官网、看板、工作台、列表、详情、门户壳、可视化、hooks 交互、表单入口，以及需要门户组件、数据管理视图、成员、部门或上传组件的场景；发布层自动注入 yida/utils window 桥。
Openyida Release
openyida/openyida
快速发布 OpenYida npm 正式版或测试版。用户说“发布正式版”“发布测试版”“发 beta”或要求按当天日期生成版本 tag 时使用；不用于宜搭应用或自定义页面发布。
Yida Openyida Publish Guard
openyida/openyida
Prevent stale local OpenYida custom page source from overwriting live designer edits.
Codemap
openyida/openyida
Generate, update, or drift-check agent-facing CodeMaps as progressive code terrain indexes for projects, features, capabilities, functions, modules, or bug chains.
Sdd Riper One Light
openyida/openyida
面向 GPT-5.5 等强模型和熟练用户的轻量 AI Agent Harness / checkpoint-driven coding skill。默认用户已经把任务切到基本可执行的最小混沌单元；模型自行分解、探索与推进，人类通过最终目标、最小 spec、复述、checkpoint、证据验证与回写来低干扰控盘。
Yida Canvas Data Binding
openyida/openyida
自定义页面真实数据接入技能。用于在使用 YidaCodeCanvas 组件实现的页面中用 dataBinding + 发布层 yida/utils window 桥接入宜搭表单、流程 API、连接器代理或同源接口数据，处理返回体包裹解析、totalCount 保护、DataBridge 状态和静默刷新。触发词：dataBinding、DataBridge、数据桥、YidaCodeCanvas…
Related
Categories
Questions about Yida Design Plan
What does Yida Design Plan do?
Plan 模式的视觉设计分支。基于需求选择视觉方向，再结合业务页面规划维护 build-plan.json 的 visualStyle，供 CLI 派生 design.md。. Yida Design Plan is an agent skill from openyida/openyida.
When should I use Yida Design Plan?
Yida Design Plan fits situations like: tasks that involve Design tokens.
How do I install Yida Design Plan in Claude Code?
Run `npx skills add openyida/openyida --skill yida-design-plan -a claude-code`. Or copy the skill folder (yida-skills/skills/yida-design/sub_skill/yida-design-plan in openyida/openyida) into .claude/skills/yida-design-plan in your project. Claude Code loads it when a task matches its description.
How do I install Yida Design Plan in Codex?
Run `npx skills add openyida/openyida --skill yida-design-plan -a codex`. Or copy the skill folder (yida-skills/skills/yida-design/sub_skill/yida-design-plan in openyida/openyida) into .agents/skills/yida-design-plan in your project. Codex loads it when a task matches its description.
Can I use Yida Design Plan 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 openyida/openyida --skill yida-design-plan -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/yida-design-plan, .gemini/skills/yida-design-plan, .github/skills/yida-design-plan and .opencode/skills/yida-design-plan in your project.
What does Yida Design Plan need to run?
SKILL.md names no scripts, command-line tools or credentials: Yida Design Plan is instructions for the agent only.
Does Yida Design Plan 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 Yida Design Plan 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Yida Design Plan use?
Yida Design Plan 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 Yida Design Plan use?
About 756 tokens (SKILL.md is roughly 3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.
What are the alternatives to Yida Design Plan?
Skills that share tags, products or a category with Yida Design Plan: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), MCP Development (coollabsio/coolify, 63k stars) and Design System (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Yida Design Plan?
openyida (a GitHub organization) maintains it in openyida/openyida, which has 220 GitHub stars. The repository holds 58 skills in this directory. The repository was last updated on October 8, 2026.
Source: openyida/openyida on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.