重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
figma-design-to-code by ecomfe/tempad-dev
npx skills add https://github.com/ecomfe/tempad-dev --skill figma-design-to-code使用此技能将 TemPad Dev 设计证据转换为符合项目一致性的 UI 代码。
必须确保 TemPad Dev MCP 可用,并且能够为当前选中项或提供的 nodeId 提供可信的设计证据。否则,停止并告知用户启用或重新连接 TemPad Dev MCP。
在此技能中,TemPad Dev MCP 是设计证据的权威来源。请遵循:
在阅读本地证据之前,不要推断项目惯例。
对于与 Figma 转代码无关的问题,请遵循项目说明文件(如 AGENTS.md 和其他项目说明),而不是在此技能中定义新策略。如果此类问题在项目说明中未指定,并且会实质性地改变实现,请询问用户或停止。
使用三种证据渠道处理不同任务:
AGENTS.md 或等效的项目说明文件、设计系统文档、令牌/主题文档、组件文档、现有基础组件、附近实现、框架/样式配置、资源规则和项目脚本tempad-dev:get_code 获取标记、样式、令牌、资源、警告和代码生成事实;仅在需要层次结构、几何、重叠和重试目标时使用 tempad-dev:get_structure广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
TemPad Dev 可以证明:
nodeId 的可见结构themeable 安全地采用一个上下文颜色通道cssUnit、scale 和 rootFontSizeTemPad Dev 无法证明:
get_structure 中缺失的样式事实;它仅作为结构辅助工具不要输出 data-hint-* 属性。
切勿发明未经证据证实的视觉细节或行为,包括颜色、排版、间距、圆角、边框、阴影、渐变、不透明度、覆盖层、模糊、隐藏状态、响应式行为、交互或资源语义。
除非项目约束强制要求调整,否则将 TemPad Dev 输出的高级或不常见样式视为有意为之。
仅当答案会实质性地改变实现,且无法从项目或设计证据中确定时,才询问用户。典型的阻碍包括:
如果差距较小且非阻碍性,请基于明确陈述的推断继续。
优先进行最小安全更改。除非项目模式明确要求,否则不要执行无关的重构或添加新的抽象。
没有新证据时,不要进入开放式的视觉调整循环。如果剩余的差异无法从项目或设计证据中证明,请明确警告并停止或移交用户验证。
在实现之前阅读本地证据。按以下顺序优先处理:
AGENTS.md 或等效的项目说明文件至少确定:
仅当项目实际使用 Tailwind 或兼容 Tailwind 的工具时,在更改类语法或排序之前检测 Tailwind 版本和配置。
对于 Tailwind 项目,还需检查与精确值映射相关的本地主题比例,尤其是间距、尺寸、圆角和排版。
如果在阅读本地证据后仍然缺少重要的实现约束,请询问用户而不是推断。
首先调用 tempad-dev:get_code。
使用以下默认值:
resolveTokens: falsenodeId;否则使用当前选中项preferredLang 设置为匹配项目目标,例如 jsx 或 vue除非用户明确要求保留资源的矢量保真度且当前 MCP 版本明确支持,否则使用 TemPad 的默认矢量行为。
仅当用户明确不希望使用设计令牌时,才使用 resolveTokens: true。
将返回的 lang 视为权威,因为 TemPad Dev 插件或配置可能覆盖 preferredLang。
记录以下内容作为设计事实:
codelangwarningsassets(如果存在)tokens(如果存在)codegen使用 codegen.config.{cssUnit,rootFontSize,scale} 作为精确值映射的权威单位上下文。
优先获取完整请求的顶层选中项,以免丢失父级组合和容器信息。
如果 get_code 发出警告或失败,请缩小不确定性范围而不是猜测。
depth-cap:将返回的顶层结果保留为父级布局和组合的依据,然后使用返回的 data-hint-id 值为你仍需要的子树选择更窄的 get_code 后续调用。tempad-dev:get_structure,但仅用于解决层次结构或几何问题,或选择更窄的父级外壳重试目标。不要将其视为缺失的样式事实。get_code 获得可信的父级外壳或父级组合,请停止完整实现,并请用户缩小范围或选择最高优先级的子树。重试策略:
depth-cap、预算溢出或不可读目标;请先更改范围或输入如果 TemPad MCP 似乎不可用、未激活或指向错误文件,请停止并告知用户:
如果因预算溢出而要求用户缩小范围,请从错误文本中报告当前消耗量、限制和超出量。
将 TemPad Dev 输出转换为实现中已确立的模式。
py-[4px]、text-[12px] 或 font-[600])粗化为命名工具类;对于 rem 输出,使用 codegen.config.{cssUnit,rootFontSize,scale} 进行精确转换。将此应用于间距、尺寸、内嵌、间隙、圆角、font-size、line-height、letter-spacing 和 font-weight。before:、after:、content-* 或等效的 CSS,请保留它们或使用具有相同渲染结果的已确立的等效项。get_code 中的其他高保真细节,包括伪类、滤镜、遮罩、混合或背景效果以及其他非默认视觉属性,除非实现约束需要调整。首先遵循已确立的资源策略。
asset.url 下载字节。切勿替换为公共互联网资源。code 中以 <svg data-src="..."> 形式发出,请将该占位符标记视为结构、尺寸和实例颜色证据的当前设计依据。data-src 指向上传的 SVG 资源。仅当实现已有其他已确立的 SVG 策略时,才重构交付方式。themeable: true 表示一个上下文驱动的颜色通道,通常通过 currentColorthemeable: true 的矢量保留其内部调色板asset.themeable。默认保留设计令牌的使用。
令牌证据可以是直接值,也可以是由 Collection:Mode 键控的模式特定值。保留变量之间的引用(如果存在)。
当尚未使用适当的基础组件或组件时:
button、a、input 和 labelaria-label 或 alt假设现有的 CSS 重置或规范化策略。除非已有定义的模式,否则不要添加新的重置库或全局 CSS。
项目检查由项目定义,而非技能定义。
AGENTS.md)、本地文档和现有项目脚本,执行与此更改相关的任何代码检查、格式化、类型检查、构建、测试、预览、截图或设计比较步骤。在以下情况下停止,而不是交付代码:
depth-cap、外壳响应或预算溢出后无法恢复可信的父级组合交付代码时,最后说明:
如果受阻,最多提供 3 个需要用户处理的具体后续事项。
get_code 返回一个父级外壳和一个外壳警告get_code 获取缺失的子级子树themeable: true 的 SVGcurrentColor每周安装次数
68
仓库
GitHub 星标数
454
首次出现
2026年2月18日
安全审计
安装于
kimi-cli68
gemini-cli68
amp68
github-copilot68
codex68
opencode68
Use this skill to turn TemPad Dev design evidence into project-consistent UI code.
TemPad Dev MCP must be available and able to provide trustworthy design evidence for the current selection or provided nodeId. If not, stop and tell the user to enable or reconnect TemPad Dev MCP.
Within this skill, TemPad Dev MCP is the authoritative source of design evidence. Treat:
Do not infer project conventions before reading local evidence.
For concerns orthogonal to Figma-to-code translation, follow project instruction files such as AGENTS.md and other project instructions instead of defining new policy in this skill. If such a concern is unspecified there and would materially change the implementation, ask the user or stop.
Use three evidence channels for different jobs:
AGENTS.md or equivalent project instruction files, design-system docs, token/theme docs, component docs, existing primitives, nearby implementations, framework/styling config, asset rules, and project scriptstempad-dev:get_code first for markup, styles, tokens, assets, warnings, and codegen facts; tempad-dev:get_structure only for hierarchy, geometry, overlap, and retry targetingTemPad Dev can prove:
nodeIdthemeablecssUnit, scale, and rootFontSizeTemPad Dev cannot prove:
get_structure; it is only a structure aidDo not output data-hint-* attributes.
Never invent visual details or behavior not evidenced, including color, typography, spacing, radius, borders, shadows, gradients, opacity, overlays, blur, hidden states, responsive behavior, interactions, or asset semantics.
Treat advanced or uncommon style output from TemPad Dev as intentional unless project constraints force an adaptation.
Only ask the user when the answer would materially change the implementation and cannot be established from project or design evidence. Typical blockers:
If a gap is minor and non-blocking, proceed with a clearly stated inference.
Prefer the smallest safe change. Do not perform unrelated refactors or add new abstractions unless project patterns clearly call for them.
Do not enter open-ended visual tuning loops without new evidence. If remaining differences cannot be proved from project or design evidence, warn clearly and stop or hand off for user validation.
Read local evidence before implementing. Prioritize, in order:
AGENTS.md or equivalent project instruction filesEstablish at least:
Only if the project actually uses Tailwind or Tailwind-compatible tooling, detect Tailwind version and config before changing class syntax or ordering.
For Tailwind projects, also inspect the local theme scales relevant to exact- value mapping, especially spacing, sizing, radius, and typography.
If a material implementation constraint is still missing after local evidence, ask the user instead of inferring it.
Call tempad-dev:get_code first.
Use these defaults:
resolveTokens: falsenodeId only when the user provided one; otherwise use the current selectionpreferredLang to match the project target, such as jsx or vueUse TemPad's default vector behavior unless the user explicitly asks for asset-preserving vector fidelity and the current MCP version clearly supports it.
Use resolveTokens: true only when the user explicitly does not want design-token usage.
Treat returned lang as authoritative because TemPad Dev plugin or config may override preferredLang.
Record these as design facts:
codelangwarningsassets, if presenttokens, if presentcodegenUse codegen.config.{cssUnit,rootFontSize,scale} as the authoritative unit context for exact-value mapping.
Prefer fetching the full requested top-level selection first so parent composition and containment are not lost.
If get_code warns or fails, narrow uncertainty instead of guessing.
depth-cap : keep the returned top-level result as the source of parent layout and composition, then use returned data-hint-id values to choose narrower get_code follow-ups for the subtrees you still need.tempad-dev:get_structure, but use it only to resolve hierarchy or geometry, or to choose a narrower parent-shell retry target. Do not treat it as missing style truth.get_code, stop full implementation and ask the user to narrow scope or choose the highest-priority subtree.Retry policy:
depth-cap, budget overflow, or unreadable target; change scope or inputs firstIf TemPad MCP appears unavailable, inactive, or pointed at the wrong file, stop and tell the user to:
If asking the user to narrow scope because of budget overflow, report the current consumption, limit, and overage from the error text.
Translate TemPad Dev output into the implementation's established patterns.
py-[4px], text-[12px], or font-[600] into named utilities unless local project evidence proves the same rendered value; for rem output, use codegen.config.{cssUnit,rootFontSize,scale} to convert exactly. Apply this to spacing, sizing, inset, gap, radius, font-size, line-height, letter-spacing, and .Follow the established asset policy first.
asset.url. Never substitute public internet assets.<svg data-src="..."> in code, treat that placeholder markup as the current design truth for structure, sizing, and instance color evidence. data-src points at the uploaded SVG asset. Only refactor delivery when the implementation already has another established SVG policy.themeable: true means one context-driven color channel, typically via currentColorPreserve design-token usage by default.
Token evidence may be either direct values or mode-specific values keyed by Collection:Mode. Preserve references between variables when present.
When not already using an appropriate primitive or component:
button, a, input, and labelaria-label or altAssume the existing CSS reset or normalize strategy. Do not add new reset libraries or global CSS unless there is already a defined pattern for it.
Project checks are project-defined, not skill-defined.
AGENTS.md, local docs, and existing project scripts for any lint, format, typecheck, build, test, preview, screenshot, or design-comparison steps relevant to this change.Stop instead of shipping code when:
depth-cap, shell response, or budget overflowWhen shipping code, end with:
If blocked, provide at most 3 concrete next items needed from the user.
get_code returns a parent shell and a shell warningget_codethemeable: truecurrentColorWeekly Installs
68
Repository
GitHub Stars
454
First Seen
Feb 18, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
kimi-cli68
gemini-cli68
amp68
github-copilot68
codex68
opencode68
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
53,200 周安装
font-weightbefore:, after:, content-*, or equivalent CSS, keep them or use an established equivalent with the same rendered result.get_code, including pseudo- classes, filters, masks, blend or backdrop effects, and other non-default visual properties, unless implementation constraints require adaptation.themeable: trueasset.themeable only after accounting for the project's existing SVG delivery policy.