Yida Design Plan logo

Yida Design Plan

Organization
openyida
yida-design-plan

Plan 模式的视觉设计分支。基于需求选择视觉方向,再结合业务页面规划维护 build-plan.json 的 visualStyle,供 CLI 派生 design.md。

Overview

Publisheropenyida
Repositoryopenyida
Skill nameyida-design-plan
Stars
228
Forks
50
Bundled files
20
LicenseMIT
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 20 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by openyida on GitHub. Read the source before you install it.

Installation

Install the Yida Design Plan AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/openyida/openyida.git /tmp/openyida
mkdir -p .claude/skills
cp -r /tmp/openyida/yida-skills/skills/yida-design/sub_skill/yida-design-plan .claude/skills/yida-design-plan
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Yida Design Plan in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Yida Design Plan on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Yida Design Plan is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Plan 视觉设计

负责 Plan 的视觉候选与页面视觉应用。选型遵守 共享主题规则,与 Fast 和单页共用上层主题库。首轮仅保留整体风格或可调整建议,主题映射在规划准备补齐;需求确认后由 Plan 流程 启动页面视觉设计。

已有方案的配色、布局或页面设计调整,直接按 局部调整 修改相关视觉字段,跳过下面的首版流程。

阶段一:识别意向并确定视觉方向

输入为共享的 .cache/openyida/<项目名>/requirement-brief.json。

先按已选风格只确认一次读取原始需求、最新补充、视觉参考与已保存选择。已有风格意向直接推演;参考网站或设计图按视觉 DNA 提取实际读取后生成设计与 CSS,不再询问主题风格。缺少主题 ID 或设计细节由 AI 补齐。

用户显式要求“预览效果辅助风格选择”时,先匹配 catalog 中的模板原图,以对话内 HTML 卡片与 ask_human 同轮展示;该请求优先于 Fast 内部选型,不能只返回链接或替用户选定。仅查看效果不重新提问。

仅在没有风格意向、视觉参考或可复用选择时,按设计方向比较生成恰好三套完整方向(两个模板方向和一个独立自由创意选项),并按视觉方向选择交给 yida-app 按宿主展示规则统一呈现(所有环境使用 ask_human,用户明确要求时将效果 HTML 卡片与该选择同轮展示);用户已委托 AI 决定时内部选定,不反问。候选阶段只读主题索引中的精简风格摘要,不读取候选模板全文;直接推演或获得选择后写入一致的 visualDirection、selectedTheme、colorStrategy 和导航结构,再读取选中的一份完整模板;模板方向的导航明暗由模板 navTheme 派生;自由创意按业务独立编写设计决策、导航明暗和 Token,不要求匹配模板。

阶段二:完成页面视觉应用

规划准备补齐视觉方向后,CLI 将基础主题、主题色和导航样式预填为标准 Plan 输入;模型仍须在业务页面确定后完成每个真实自定义页的具体视觉决定。按 CLI 返回的任务补齐,可以在同一轮业务规划中完成;两个片段分别保存。

  1. 读取 CLI 返回的 authoring-context.md 与 紧凑计划契约,沿用 pageId 和 sceneKey。
  2. 工作台沿用 PRD 的业务内容和表现建议。为每个真实自定义页填写 firstScreenFocus、layout、primaryAction、responsive 与 acceptanceChecks;前四项为具体非空说明,验收为非空字符串数组。公共主题不能代替这些决定。纯原生表单应用不增加虚构页记录。 按响应式决策与字段映射在这五个字段内写清:宽屏、窄容器和触屏各展示什么、怎样操作、何时重排、保留哪些状态,以及选择依据。Fast 与单页设计写入相同的 design.md 要点。
  3. 按 整体主题规则 核对导航、应用框架、原生表单、记录详情与自定义页面的配色、形状、文字、间距和状态。每项必须保留 visualMemoryApplications 数组;没有匹配的主题记忆点时填写 [],不要省略或写成字符串。按实际内容补页面局部差异与素材策略。完整主题由 CLI 注入,复杂组件定制时再读模板对应章节。
  4. 全局和局部 token 遵守 基础变量契约,明确项目差异写 visualStyle.tokens,主色写 forUser.colorStrategy.primaryColor;沿用主题的字号、间距和组件圆角。
  5. CLI 按 公共输出契约 生成 frontmatter、anchor 索引和五章正文,并调用同一 check-design 校验。缺少逐页决定时只保留可预览草稿,补齐后再生成最终产物;旧计划同样不得以继承主题套话补过门槛。

逐页按 阅读无障碍门禁 将实际要求写入已有 layout、responsive 和 acceptanceChecks,覆盖文字可读、放大重排及完整信息获取;不新增重复字段,不将 CLI 校验通过视为读屏或真实页面验收通过。

用户选择整体暗色或黑色主题时,按 暗色主题浮层适配 补齐 visualStyle.tokens;内容界面明暗与导航明暗分别描述,导航明暗仍由所选主题模板确定。

首版提交前,将基础视觉与 pageApplications 一次补齐到已有 visual.json。仅超大需求需要中间展示时才按 按模块更新方案 提交。主流程负责生成方案、展示和确认,主题 CSS 使用 CLI 返回的 outputs.theme。

校验失败时定点修复

遇到 DESIGN_PLAN_PAGE_BINDINGS_REQUIRED 时,保留现有计划和预览,按以下顺序修复:

  1. 定位:读取错误 details.issues 中每项的 sourcePath、path 和 code,修改对应源文件。若问题来自 business.json,先按已确认需求修正页面事实,再核对视觉绑定。
  2. 修改:以 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 必须为数组,无适用内容填 []。
  3. 回读并重试:确认修改已写入源文件,再重试原 materialize 命令。写入失败、跳过或结果未知时,先回读核实,不能仅凭发起过工具调用认定修复完成。

修复仅涉及错误字段,保留 build-plan.json、business.json、visual.json 和已有预览;不因字段校验失败删除目录、重新 init、重写整份 PRD 或扩大需求范围。

本地校验失败统一按本地校验修复处理:先修正并回读源文件,未变化不重跑,连续两次修复无进展时保留产物并报告阻塞。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Yida Design Plan AI skill do?

Plan 模式的视觉设计分支。基于需求选择视觉方向,再结合业务页面规划维护 build-plan.json 的 visualStyle,供 CLI 派生 design.md。

Why use Yida Design Plan on TypingMind?

Because you install it once and use it with any model. Yida Design Plan is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Yida Design Plan in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/openyida/openyida/tree/main/yida-skills/skills/yida-design/sub_skill/yida-design-plan. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Yida Design Plan?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Yida Design Plan?

As many as you like. As long as a model supports skills, you can use Yida Design Plan with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Yida Design Plan AI skill free?

Yes. It is published on GitHub by openyida under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇