Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
在 React 项目中接入、生成、修改、联调或验收 HiUI 典型页与非典型页面时使用。适用于 数据统计表、普通表格、树形表格、左树右表、数据可视化、异常反馈页、抽屉表单/详情、 全页编辑/详情、不规范原型截图转规范页、老旧系统截图/URL/源码现代化转译，以及 host-integration、rules-only、legacy-host-compatible 等场景。
Install Hiui Design
$ npx skills add XiaoMi/hiui --skill hiui-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install XiaoMi/hiui hiui-design --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/XiaoMi/hiui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hiui-workflow/hiui-design .claude/skills/hiui-design && 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 "hiui-design" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui-workflow/hiui-design into .claude/skills/hiui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui-design", 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/XiaoMi/hiui/tree/master/skills/hiui-workflow/hiui-designType 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 XiaoMi/hiui --skill hiui-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install XiaoMi/hiui hiui-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/hiui-workflow/hiui-design .agents/skills/hiui-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hiui-design" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui-workflow/hiui-design into .agents/skills/hiui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui-design", 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 XiaoMi/hiui --skill hiui-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install XiaoMi/hiui hiui-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/hiui-workflow/hiui-design .cursor/skills/hiui-design && 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 "hiui-design" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui-workflow/hiui-design into .cursor/skills/hiui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui-design", 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/XiaoMi/hiui.git --path skills/hiui-workflow/hiui-design--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 XiaoMi/hiui --skill hiui-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install XiaoMi/hiui hiui-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/hiui-workflow/hiui-design .gemini/skills/hiui-design && 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 "hiui-design" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui-workflow/hiui-design into .gemini/skills/hiui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui-design", 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 XiaoMi/hiui hiui-designInstalls 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 XiaoMi/hiui --skill hiui-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/hiui-workflow/hiui-design .github/skills/hiui-design && 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 "hiui-design" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui-workflow/hiui-design into .github/skills/hiui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui-design", 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 XiaoMi/hiui --skill hiui-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install XiaoMi/hiui hiui-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/hiui-workflow/hiui-design .opencode/skills/hiui-design && 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 "hiui-design" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui-workflow/hiui-design into .opencode/skills/hiui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui-design", 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
hiui-design- GitHub stars
- 879
- Token cost
- ~3.3k tokens
- SKILL.md length
- 792 words
- Files
- 986 (incl. scripts)
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
在 React 项目中接入、生成、修改、联调或验收 HiUI 典型页与非典型页面时使用。适用于 数据统计表、普通表格、树形表格、左树右表、数据可视化、异常反馈页、抽屉表单/详情、 全页编辑/详情、不规范原型截图转规范页、老旧系统截图/URL/源码现代化转译，以及 host-integration、rules-only、legacy-host-compatible 等场景。
- Tasks that involve Design systems
- SKILL.md covers Positioning, Core Object Model, Standard Generation Protocol and Guardrails, plus 7 more sections
What it does
Hiui Design is an agent skill from XiaoMi/hiui. 在 React 项目中接入、生成、修改、联调或验收 HiUI 典型页与非典型页面时使用。适用于 数据统计表、普通表格、树形表格、左树右表、数据可视化、异常反馈页、抽屉表单/详情、 全页编辑/详情、不规范原型截图转规范页、老旧系统截图/URL/源码现代化转译，以及 host-integration、rules-only、legacy-host-compatible 等场景。
Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 990 other files, including scripts (for example `CHANGELOG.md`, `GENERATED_DO_NOT_EDIT.md` and `OPEN_SOURCE_SYNC.md`).
It sits in Frontend & Design, covering Design systems. It works with React. The repository describes itself as: HIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Design systems
Example prompts
- “/hiui-design”
What it can do on your machine
Read from SKILL.md and the folder at commit f056c80. 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
Hiui Design loads about 3.3k tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 792 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 XiaoMi/hiui at commit f056c80, republished under its Apache-2.0 licence (© XiaoMi). 792 words, ~3,259 tokens.
Download SKILL.mdSave it as
.claude/skills/hiui-design/SKILL.md (or your agent's skills folder). This skill also uses 985 other files; get the full folder from GitHub.- name
- hiui-design
- description
- 在 React 项目中接入、生成、修改、联调或验收 HiUI 典型页与非典型页面时使用。适用于 数据统计表、普通表格、树形表格、左树右表、数据可视化、异常反馈页、抽屉表单/详情、 全页编辑/详情、不规范原型截图转规范页、老旧系统截图/URL/源码现代化转译，以及 host-integration、rules-only、legacy-host-compatible 等场景。
HiUI 典型页 Skill
Positioning
本 skill 是 HiUI React 页面工程的标准生成协议与交付治理控制面。page-task-plan.v1 继续是唯一顶层执行入口；generationRecipe 是其内部的正向生成子协议；交付完成态仍由 preflight-report.v1、hiui-page-governance-report.v1、acceptanceProfile 与 finalReportContract 决定。主叙事是“先按 recipe 正确生成，再由验收确认”，而不是“先生成一版，再靠验收纠偏”。
标准典型页命中 page-component + slot-fill 时，默认走 minimal-doc fast path：优先消费 planner、scaffold 与 slot contract，不再手工展开大段治理文档；复杂页、漂移页和正式验收场景才升级到完整规则链路。
legacy-host-compatible 的主路径统一为 project-certified carrier first -> page-component semantics -> explicit fallback。宿主承接事实成立时，应优先消费项目认证 carrier 或已认证页面组件，managed-translation 只保留为显式 fallback。runtime-bridged-page-component 只是 legacy 中对 page-component 的桥接语义命名，不引入平行 generation family；命中 header 时，只有 carrier certification、page contract 与 preflight 能共同证明 PageHeader stretch、extra right-docked 和 60px 节奏 owner 不漂移，主链路才成立。
对外沟通时要把两件事拆开说明：legacy 宿主主树不能被当成 generic @hiui-design/typical-page-shells 直挂运行时，不等于 legacy 项目不能走普通典型页组件主链。只要 planner 已给出 page-component + runtime bridge + slot fill，就必须沿该主链执行，不得把“不能 ad hoc direct shell import”误读成“只能 reference/fallback”。
Core Object Model
page-task-plan.v1是唯一执行计划与事实出口；AI 不手工拼mode、pageType、pageUnits、startFrom、requiredDocs、requiredActions或关键命令链。generationRecipe作为page-task-plan.v1的增量子对象引入，不单独创建平行顶层 contract。generationRecipe只描述装配顺序、资产映射、槽位边界、禁止动作与轻量一致性检查；不重复存储可由pageComponent、baseMoldId、registry 或既有 contract 派生出的事实。targetDeliverySemantics与currentExecutionState必须分层输出：前者回答“计划成立后应沿哪条受管交付主链落地”，后者回答“当前这一步允许执行什么”。legacy blocked 时，前者仍可保留page-component + runtime bridge + slot fill目标语义，但后者必须只暴露ResolveBlockingFacts。editableSlots、lockedRegions、pageComponent、baseMoldId优先保持“引用或派生”，不复制进 planner。runtimeBridgeProfile只作为 legacypage-component路径的附加解析对象存在；它通过rules/runtime-bridged-component-matrix.json描述运行时桥接策略，不重定义pageComponent、baseMoldId、lockedRegions或业务槽位事实。- project 级
host pack、project-scopedpage carrier与其认证结果属于运行时 / 资产事实，默认由计划通过facts、assetResolution、pageComponent等字段引用；不要把这些事实再平铺复制进每个页面合同。 - carrier-critical layout facts，尤其
header的 stretch owner、actions docking 与 vertical rhythm owner，属于 contract + certification + preflight 共同消费的机器事实；不得退化成只存在于说明文档里的软建议。 acceptanceProfile、preflight-report.v1、hiui-page-governance-report.v1、finalReportContract继续保留，不降级、不移除。requiredDocs是默认唯一补读来源；其最小结构固定为path、readMode、reason。先读readMode=required，reference/conditional只在命中对应场景时补读。requiredActions是默认唯一执行来源；没有结构化动作时，优先使用兼容命令字段，不自行扩展 gate。
对象模型与字段分级：docs/generation/explainers/core-object-model.md
Standard Generation Protocol
Standard Generation Protocol 只回答 4 个问题：
- 从什么骨架起步。
- 关键 region 的装配顺序是什么。
- 哪些区域允许业务填充。
- 每完成一个关键步骤后做什么
inlineChecks。
generationRecipe.required 默认至少包含：
startingPointassemblyOrderrequiredAssetsforbiddenMoves
generationRecipe.optional 可按页型与复杂度逐步补齐：
slotFillPolicyregionOwnershipinlineChecks
第一批 recipe 只覆盖高频页型：
table-pageanalytics-pageedit/detail-page
标准生成协议补读：docs/generation/explainers/standard-generation-protocol.md
Guardrails
- 本 skill 只处理 HiUI React 页面工程任务；需求细化、端到端流程编排、Figma 写入 / 设计稿生成、通用 React 重构必须交给对应 skill 或普通代码流程。
- 页面生成、重写、大改、页型迁移和旧系统 / 截图转译必须先取得
page-task-plan.v1；没有机器计划时不得手工拼结论、命令链或完成态。 blockingIssues/blockingReasons非空时必须 fail closed，只补事实；不得生成页面、写合同、跑 preflight 或输出完成态。- 资产新增、补齐和更新只能走 shipped public contract；
add-asset/update-asset必须 dry-run，未 shipped 的 write / force / asset type 不得执行。 - 未经机器计划明确授权或维护者明确要求，不得执行 deploy、upload、publish、sync、global sync、Feishu / bitable 后台写入、release archive 生成或历史输出覆盖。
- 涉及外部服务、后台 agent、launch agent、守护进程或用户配置写入的动作，执行前必须同时验证目标范围、授权来源和 side effect 边界；缺任一条件时必须拒绝执行。
preflightfailed、hard profile governance failed、source snapshot 缺失 / 低置信度、acceptance contract缺 provenance 时，最终回复必须是 blocked / failed。- 开源版不得采集 usage data，必须按
PRIVACY.md呈现not_applicable、skipped或unavailable。
Generation Gates
- 生成前门禁：项目根、机器计划、能力画像、mode lock、pre-plan facts。
- 生成协议门禁：page-component 可用性、route ownership、slot 边界、shell / adapter 证明、analytics contract、业务内容边界、受控扩展。
legacy-host-compatible普通典型页的硬门禁真相统一收口到rules/legacy-host-hard-gates.json：baseline 固定为 4 个硬门禁，命中header时再追加header-layout-proof条件门禁，因此当前常见典型页通常会落到 5 个有效硬门禁。styleBoundary、portalBoundary、runtimeSmoke仍按风险触发；但header的 stretch / right-dock / rhythm owner 不再只是样式建议，缺少结构化证明时必须阻断主链路。legacy-host-compatible下若 planner 已证明page-componentready 且runtimeAdapterProof.status=available，默认执行语义就是page-component + runtime bridge + slot fill。缺少 legacy 主树 direct shell import 前提，只能阻止 ad hoc standard-shell mount，不能作为擅自降级到兼容手拼页、reference 默认翻译页或自由 fallback 的理由。- 前两层门禁属于“如何正确生成”的组成部分，不再和交付阻断口吻混写。
required级generationRecipe字段缺失时，不得假设或手工脑补；只能 blocked， 或按计划明确给出的 fallback 执行。startingPoint无法解析、requiredAssets不可用、或assemblyOrder不完整时， 不允许自由退回空白页手写。- 只有当计划明确给出
managed-fallback、host-archetype或reference-or-scaffold为合法 fallback 时，才允许降级生成。 optional字段缺失不自动阻断，但不得伪造填充；缺失时按页型默认策略或现有规则执行。
生成门禁细节：docs/generation/explainers/generation-gates.md
Delivery Gates
preflight-report.v1与hiui-page-governance-report.v1继续是交付确认层核心判断对象。acceptanceProfile决定验收范围；formal acceptance是验收等级，不是生成链路。finalReportContract继续保留，用于完整报告与下游兼容。- 交付门禁只负责“是否允许宣告完成”，不再主导生成叙事。
- 若某类问题连续多次在
DeliveryConfirmation阶段暴露，必须优先回灌到generationRecipe或 generation gates，而不是持续追加新的验收描述。
交付门禁细节：docs/generation/explainers/delivery-gates.md
Runtime Protocol
- 运行时协议的唯一真相是
rules/runtime-contract.md；受管页面治理协议的唯一真相是rules/page-governance.md。 rules/runtime-bridged-component-matrix.json是 legacypage-component桥接语义的唯一真相；它只声明 bridge profile、runtime shell 来源与薄桥层职责，不复制 mold / slot / ownership 事实。rules/legacy-host-hard-gates.json是 legacy 普通典型页硬门禁编排的唯一机器真相；SKILL.md、生成门禁说明和 planner 只引用它，不再各自手写门禁数量。- 基础项目事实（mode、capabilities、route ownership、i18n、governance availability）与基础资产事实（certified page component、mold、adapter catalog）应由计划内部消费并通过
facts、assetResolution、projectMode、targetPage.routeOwnership等字段暴露。 - 对已接入项目，接入阶段写入的
.local-context/hiui-design/outputs/project-integration-state.json属于 project 级 runtime input fact。PlanTask应优先复用它与project-mode.json， 直接进入页面规划；只有该状态缺失、损坏或与当前事实冲突时，才回退到 host profile / mode detection 诊断。 project-integration-state.json.integrationReady=true只有在接入阶段已经验证过 project-certified carriers 的componentSource、componentShell与componentSupportSources都能解析到真实项目源码时才成立；缺任一项时，接入必须保持integrationReady=false，页面生成阶段只允许暴露阻断原因，不得把缺失 carrier 问题延后到 业务页实现期才发现。- 对
legacy-host-compatible，integrationReady=true的定义本身就包含项目级 required rollout 已完成： 默认先覆盖table-basic、table-stat、tree-table、tree-split、drawer-form、drawer-detail、full-page-edit、full-page-detail这些carrier-first-required页型；feedback-status与data-visualization可作为 deferred batch 后补。缺少 required batch 的 project-certified carrier 时，integration state 必须显式输出requiredLegacyPageTypes、deferredLegacyPageTypes、certifiedLegacyPageTypes、missingRequiredLegacyPageTypes与legacyRolloutCoverageStatus=blocked，并把当前项目视为 legacy 接入未完成，而不是“已接入但页面阶段再补 rollout”。 integrationReady默认只回答“项目是否已完成 hiui-design 接入”和“legacy 宿主桥接是否已具备项目级承接事实”。对 legacy，这个完成态已经内含 required carrier batch ready；rules-only/host-integration下标准典型页组件是否可用，属于 planner 消费的资产事实与页型支持事实，不应被收口为通用项目接入失败。- project-scoped host pack / carrier facts 也属于 runtime input facts。对 legacy 项目，应优先 在项目接入 / capabilities 阶段一次认证，再由页面生成阶段复用，不要在每个页面重复解释宿主边界。
- Agent 只在 plan 缺失 / 冲突 / 排障 / 维护时显式读取 capabilities、mode lock、 认证文件或 catalog。
host-qualification-facts.v1只是 runtime input facts contract，不是 execution plan； 它只承载 legacy 宿主边界、bridge / adapter 事实与 provenance。typical-page:runtime-smoke只记录“当前源码快照上的浏览器级证据”，不负责宣告页面完成；preflight/doctor只把该证据与当前源码快照对齐并识别是否已过期； 只有typical-page:finalize-page可以把交付状态翻转为finalized。
Show full SKILL.md (260 more words)Show less
Task Lifecycle
文档叙事层统一为：
LocateProjectRoot -> PlanTask -> ResolveBlockingFacts -> BuildGenerationRecipe -> GenerateByRecipe -> InlineConformanceChecks -> DeliveryConfirmation -> OutputDeliverySummary
PlanTask：默认先消费项目级 integration facts，再补 capabilities / route / asset-resolution；不要把“确认仓库结构 / 确认是否已接入 hiui-design”当成每次页面任务的可见前置步骤。planner 默认还要把生成期与交付期动作拆成generationInputs、inlineChecks、deliveryChecks，避免把重验收口径前移成生成指导。PlanTask输出层必须同时暴露targetDeliverySemantics与currentExecutionState：前者描述目标交付主链，后者描述当前允许动作、阻断相位与 blocker 优先级。requiredCommands、requiredActions与canStartImplementation必须跟currentExecutionState一致，不得再让 blocked 计划对外看起来像可以直接开始页面生成。PlanTask对 legacy 普通典型页的首要职责之一，是把 “禁止 legacy 主树 ad hoc 直挂 standard shell” 与 “允许 page-component + runtime bridge + slot fill 主链” 同时暴露清楚；不得把 direct shell import 不成立，回退表达成通用 page-component 不可用。- 若项目级 integration facts 已存在但
integrationReady=false，PlanTask必须 fail closed， 直接回显接入阻断原因；不要再尝试把页面生成、起手 scaffold 或页面级 preflight 当成接入 / legacy bridge 完整性的补救路径。页型级page-component资产是否 ready，继续由 planner 的assetResolution/projectTypicalPageSupport独立判断，而不是反写成通用 integration debt。 - 当
integrationReady=false的原因来自 legacy required rollout 未完成时，PlanTask默认应把bootstrap-target-project放在ResolveBlockingFacts队首；这表示当前项目的 legacy 接入 / bootstrap 还未完成，而不是“已接入项目在页面阶段追加一个 rollout 步骤”。若同时命中 route ownership blocker，再在其后追加 route 修复动作，不得跳过项目级 carrier rollout 直接进入页面实现。 BuildGenerationRecipe：把generationStrategy转化为标准装配协议。GenerateByRecipe：生成行为必须遵循assemblyOrder、requiredAssets、forbiddenMoves；不允许自由发明页壳、region owner、slot 顺序。InlineConformanceChecks：关键装配步骤后的轻量一致性检查，不把重验收前移。DeliveryConfirmation：末端确认层，内部继续承接WriteContract、Preflight、PreviewReady、FormalAcceptance、RuntimeGovernance。开源版不承担 usage telemetry / stats closeout，最终回复只收口页面交付与质量验证状态。- 这是叙事改名，不是立即的外部接口改名；公共脚本、报告对象和字段至少保留一个迁移周期 alias。
详细生命周期仍以 rules/page-task-lifecycle.md 为唯一真相。
First Turn Output
页面任务首轮回复默认优先展示生成信息，而不是先铺验收字段。默认优先字段：
generationStrategygenerationRecipegenerationInputsinlineChecksprimaryGenerationAssetassemblyOrderrequiredAssetsextensionPolicyrequiredActions
复杂或严格场景再展开：
deliveryChecksacceptanceLevelacceptanceProfilefinalReportContract
若命中 non-typical-overlay 或 single-page-composite，首轮还必须直接暴露 layoutStrategy、layoutArchetype、nonTypicalScope、mandatoryComponents、compositionGuardrails、strategyEvidence 与 ownershipPlan；这些属于生成输入事实，不是交付后才补的检查备注。
若命中不规范原型截图、旧系统截图 / URL / 源码，首轮按
docs/generation/ai-kickoff-template.md 输出 kickoffType=pre-plan-facts，只解释
visual-translation-brief.v1 与必要的 host-qualification-facts.v1 状态。
Truth Index
- 机器计划入口、成功信号和失败信号：
scripts/README.md - 快路径执行入口与补读顺序：
rules/QUICK-START.md - 公开 CLI 契约：
scripts/public-cli-contracts.json - 运行时协议：
rules/runtime-contract.md - 页面任务生命周期：
rules/page-task-lifecycle.md - 失败恢复矩阵：
rules/failure-matrix.md - 生成约束：
rules/generation-rules.md - 数据可视化主次/样式机器策略：
rules/chart-semantic-policy.json、rules/data-visualization-layout-policy.json - 页面组件与模具注册表：
rules/page-component-registry.json、rules/page-mold-registry.json - runtime bridge profiles：
rules/runtime-bridged-component-matrix.json - legacy hard gates：
rules/legacy-host-hard-gates.json - runtime 交付策略：
rules/runtime-delivery-policy.json - adapter 注册表：
rules/adapter-registry.json - contract 约束与摘要：
rules/contract-regions.md - 页面治理与 source snapshot / acceptance contract：
rules/page-governance.md - 验收清单：
rules/validation-checklist.md - 前向验证与成功指标：
docs/validation/generation-recipe-forward-tests.md - 页面组件策略与认证：
docs/generation/page-level-components.md、docs/generation/component-certification.md - explainers（解释层，不是 source of truth）：
docs/generation/explainers/README.md - 页头几何与宿主 baseline：
docs/generation/figma-reference.md - 旧宿主转译：
docs/generation/legacy-host-compatibility.md - 视觉 / 旧系统 pre-plan facts：
docs/generation/visual-to-hiui-translation.md - 非典型页面：
docs/generation/non-typical-pages.md - 图表与数据可视化：
docs/generation/figma-page-rules.md、docs/generation/figma-pages/data-visualization.md - usage stats：
PRIVACY.md
默认只读计划里的 requiredDocs；先消费 readMode=required，再按 reason 命中情况补读 reference / conditional 项。不要为选择模具或解释页型而整包遍历 docs/、rules/、templates/、manifests/。
Final Report
- 最终回复默认基于
deliverySummaryProfile输出轻量交付摘要。 - 复杂 / 高风险场景、严格验收、legacy 迁移、真非典型、复杂数据可视化、
preflight/ smoke 失败时，再进入finalReportContract/final-page-report.v1。 final-page-report.v1应优先复用 managed page contract / workflow 已有事实来判断页面是否已生成、是否 stale、是否曾完成 formal finalize；不要再要求上层重复手填同一组状态。- 最终报告默认阅读顺序是：页面如何生成 -> 使用了哪些主资产与槽位 -> 哪些区域继承 / 哪些区域业务填充 -> 当前交付确认状态。
- 状态字段必须完整保留，但不再占据主阅读中心。
- 若无法运行
typical-page:render-final-report，也必须呈现页面状态、preflight 状态、 formal 验收状态、usage stats 状态、已执行动作、变更文件、验证命令与剩余风险。
© XiaoMi, 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
SKILL.md and 985 other files (scripts) in skills/hiui-workflow/hiui-design of XiaoMi/hiui.
- SKILL.md
- .gitignore
- CHANGELOG.md
- GENERATED_DO_NOT_EDIT.md
- LICENSE
- OPEN_SOURCE_SYNC.md
- PRIVACY.md
- README.md
- SECURITY.md
- agents/openai.yaml
- archetypes/modes/host-integration.json
- archetypes/modes/legacy-host-compatible.json
- archetypes/modes/rules-only.json
- archetypes/page-types/data-visualization/allowed-overrides.json
- archetypes/page-types/data-visualization/archetype.json
- archetypes/page-types/data-visualization/forbidden-escapes.json
- … and 970 more
Open the folder on GitHubat commit f056c80
Compare with similar skills
Hiui Design 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 |
|---|---|---|---|---|---|---|
| Hiui Design this skillXiaoMi/hiui | 879 | — | ~3.3k | Automated safety check: Pass | Apache-2.0 | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Cosscrafter-station/petdex | 4.2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Ss Learnbitjaru/styleseed | 973 | — | ~1.3k | Automated safety check: Pass | MIT | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
Ss Learn
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
Lobe Design
lobehub/lobe-ui
Build UI with the LobeHub design system — @lobehub/ui/base-ui, the controlled form at @lobehub/ui/base-ui/form, and the chat, mobile, dashboard, awesome, brand, mdx, and i18n namespaces, plus…
More from XiaoMi/hiui
UX Walkthrough
XiaoMi/hiui
体验走查 skill。适用于代码库、URL、截图三种输入，输出结构化体验问题报告，并同步生成本地 docx 报告。触发词：体验走查、UX review、交互走查、界面审查、体验问题。
Hiui
XiaoMi/hiui
A skill your agent uses when the user's task involves HiUI (@hi-ui/) — writing HiUI components, debugging HiUI issues, querying HiUI props/docs, migrating from HiUI V4 to V5, or setting up React 19…
Hiui Refine
XiaoMi/hiui
可作为 hiui-page-workflow 等更大页面工作流的标准 S0 前置 skill，专注 B 端中后台与 HiUI 页面生成前的需求细化。将模糊或抽象的后台/管理台/运营台/配置台/审批流需求细化为可执行的产品方案、MVP 范围、用户流程、业务规则、可追踪页面清单、产品 PRD、全局生成上下文、页面级提示词和 HiUI 交接包。适用于澄清后台产品想法、把粗略需求转成 PRD…
Hiui Page Workflow
XiaoMi/hiui
用于 React / HiUI 页面从需求细化到端到端生成与验收。适用于从模糊产品需求生成并验收页面、 HiUI 页面提测前检查、页面生成后做体验走查、页面从需求到实现再到 UX 验收闭环等任务。
Related
Works with
Categories
Questions about Hiui Design
What does Hiui Design do?
在 React 项目中接入、生成、修改、联调或验收 HiUI 典型页与非典型页面时使用。适用于 数据统计表、普通表格、树形表格、左树右表、数据可视化、异常反馈页、抽屉表单/详情、 全页编辑/详情、不规范原型截图转规范页、老旧系统截图/URL/源码现代化转译，以及 host-integration、rules-only、legacy-host-compatible 等场景。. Hiui Design is an agent skill from XiaoMi/hiui.
When should I use Hiui Design?
Hiui Design fits situations like: tasks that involve Design systems.
How do I install Hiui Design in Claude Code?
Run `npx skills add XiaoMi/hiui --skill hiui-design -a claude-code`. Or copy the skill folder (skills/hiui-workflow/hiui-design in XiaoMi/hiui) into .claude/skills/hiui-design in your project. Claude Code loads it when a task matches its description.
How do I install Hiui Design in Codex?
Run `npx skills add XiaoMi/hiui --skill hiui-design -a codex`. Or copy the skill folder (skills/hiui-workflow/hiui-design in XiaoMi/hiui) into .agents/skills/hiui-design in your project. Codex loads it when a task matches its description.
Can I use Hiui Design 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 XiaoMi/hiui --skill hiui-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hiui-design, .gemini/skills/hiui-design, .github/skills/hiui-design and .opencode/skills/hiui-design in your project.
What does Hiui Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Hiui Design is instructions for the agent only.
Does Hiui Design 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 Hiui Design 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 Hiui Design use?
Hiui Design is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Hiui Design use?
About 3.3k tokens (SKILL.md is roughly 13k 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 Hiui Design?
Skills that share tags, products or a category with Hiui Design: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Coss (crafter-station/petdex, 4.2k stars), Ss Learn (bitjaru/styleseed, 973 stars) and UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Hiui Design?
XiaoMi (a GitHub organization) maintains it in XiaoMi/hiui, which has 879 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on July 24, 2026.
Source: XiaoMi/hiui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.