设计与三维建模

当任务涉及将应用页面、视图或多区块布局转换为 Figma 设计时，将此技能与 figma-use 配合使用。触发场景：'写入 Figma'、'从代码在 Figma 中创建'、'将页面推送到 Figma'、'把这个应用/页面在 Figma 中构建出来'、'创建屏幕'、'在 Figma 中构建落地页'、'更新 Figma 屏幕以匹配代码'。当用户希望从代码或描述在 Figma 中构建或更新完整页面、屏幕或视图时，这是首选的工作流技能。通过 search_design_system 发现设计系统组件、变量和样式，导入它们，并使用设计系统令牌而非硬编码值逐区块增量组装屏幕。

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

将 Figma 设计转换为可投入生产的应用代码，实现 1:1 视觉还原。当需要根据 Figma 文件实现 UI 代码、用户提到“实现设计”“生成代码”“实现组件”、提供 Figma URL，或要求构建与 Figma 规格一致的组件时使用。若需通过 `use_figma` 写入 Figma 画布，请使用 `figma-use`。

借助 Figma MCP 工作流（设计上下文、截图、素材和项目约定转换），将 Figma 节点转换为视觉上 1:1 还原的生产级代码。当用户提供 Figma URL 或节点 ID，或要求实现必须与 Figma 规格一致的设计或组件时触发。需要可用的 Figma MCP 服务器连接。

Figma to pixel-perfect code: deterministic HTML/React, then a render + pixel-diff verify loop.

**MANDATORY prerequisite** — 你必须在每次调用`use_figma`工具之前调用此技能。绝不要在未先加载此技能的情况下直接调用`use_figma`。跳过它会导致常见且难以调试的失败。当用户想要执行写操作或需要在Figma文件上下文中执行JavaScript的唯一读操作时触发——例如创建/编辑/删除节点、设置变量或令牌、构建组件和变体、修改自动布局或填充、将变量绑定到属性，或以编程方式检查文件结构。

Figma designs pulled once into a local vault; AI agents read them offline with no rate limits

Let agents manage your Figma workspace. 102 tools for seats, teams, offboarding, and cleanup.

Local Figma MCP server: frames to Flutter, SwiftUI, React and HTML code, and design in Figma.

Design an auditable playbook when no narrower one fits: a large migration, an ambitious multi-part change, or work a human reviews after stepping away. Scales rigor to the task, runs a hypothesis loop, and logs decisions via show-me-your-work. Use for /figure-it-out, 'figure it out', a large migration, or when no narrower playbook applies.

Remove filler words and disfluencies (um, uh, like, you know, basically) from a talking-head video so it sounds like they were never said. Use whenever the user wants to clean up speech, cut filler/hesitations, tighten a voiceover, or remove "um"s and "uh"s. Covers verbatim transcription, precise cutting rules, and the iterate-until-clean preview loop.

Conduz a criação de um filme de apresentação de marca em código com Remotion, no estilo de vídeo de lançamento de produto (Apple, Linear, Stripe, Vercel, Figma), nunca estilo slide animado. Cobre entrevista inicial, conceito e quadros de estilo com aprovação, storyboard preso a uma grade musical de 120 BPM, construção cena a cena com verificação de contraste e corte de texto, trilha e narração opcionais via ElevenLabs, e entrega em MP4 1080p e 720p. Use quando o usuário pedir filme da marca, vídeo institucional em código, vídeo de lançamento de produto, ou mencionar /filme-marca-remotion ou Remotion.

为构建新 UI 或重塑现有界面提供鲜明且有意图的视觉设计指导。帮助确定审美方向、字体和设计取舍，避免呈现模板化默认效果。

在创建或大幅重新设计网页界面、落地页、仪表盘、组件或其他前端 UI 且视觉方向和实现质量很重要时使用。产出针对主题的艺术指导、无障碍代码和渲染后的视觉验证。

为构建新 UI 或重塑现有界面提供鲜明且有意图的视觉设计指导。帮助确定审美方向、字体和设计取舍，避免呈现模板化默认效果。

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

フロントエンド設計の方向性、美的原則、および一貫した設計言語実装。

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

审查并创建具有高设计质量和设计系统合规性的独特、生产级前端界面。从三大支柱进行评估：无摩擦的从洞察到行动、高质量的工艺以及可信赖的构建。适用场景：PR 审查、设计审查、无障碍审计、设计系统合规检查、创意前端设计、UI 代码审查、组件审查、响应式设计检查、主题测试以及创建令人难忘的 UI。不适用于：后端 API 审查、数据库模式审查、基础设施或 DevOps 工作、无 UI 的纯业务逻辑，或非前端代码。

游戏美术原则。视觉风格选择、资源管线、动画工作流。

游戏音频原则。声音设计、音乐集成、自适应音频系统。

游戏设计原则。GDD 结构、平衡性、玩家心理、进度设计。

游戏开发编排器，根据项目需求路由到特定平台的技能。

Video game prices from completed eBay and Vinted sales, by platform, region, edition and condition.

GAN-inspired Generator-Evaluator agent harness for building high-quality applications autonomously. Based on Anthropic's March 2026 harness design paper. Use when a feature should be built autonomously through generator and evaluator iteration until it clears a quality bar.

Local stdio MCP for OpenAI-compatible and Gemini image generation, editing, and model fallback.

使用 AI 模型（FLUX、Gemini）生成或编辑图像。用于照片、插画、艺术作品、视觉素材、概念图等通用图像，以及非技术图或非原理图的图像。流程图、电路图、通路图和技术图应改用 scientific-schematics 技能。

Generate and edit images, video, music, speech and sound effects with your getimg.ai account.

Drive Google Flow from an agent: Veo video and Imagen image generation

Attach local images or videos to GitHub issues, pull requests, and comments using native gh --attach. Use for screenshot uploads, before/after evidence, gh image requests, or reusing user-attachments URLs in GitHub markdown. For finding macOS screenshots, use the screenshots skill first.

MCP server for GigaChat — AI chat, embeddings, image generation (Russia)

Design or refine GitHub Pages direction, composition, tokens, themes, and responsive styling. Use for Pages visual work and critique, not generic product design or a full rendered UX audit.

Design or refine GitHub Pages direction, composition, tokens, themes, and responsive styling. Use for Pages visual work and critique, not generic product design or a full rendered UX audit.

Design or refine GitHub Pages direction, composition, tokens, themes, and responsive styling. Use for Pages visual work and critique, not generic product design or a full rendered UX audit.

Idiomatic Go guidance for writing and reviewing Go code - style, naming, MixedCaps, GoDoc comments, error handling (%w, errors.Is/As, sentinel errors), goroutines/channels/select/context, safety (nil maps, append aliasing, type assertions), structs/interfaces, generics, table-driven tests, testify, golangci-lint, go.mod dependency management, project layout, slog/Prometheus/OpenTelemetry observability, and gRPC. Use when writing, reviewing, or refactoring Go (.go) code, editing go.mod/go.sum, running go test or golangci-lint, debugging goroutine leaks or races, or making Go design decisions. For the samber/* library stack (lo, oops, do, mo, slog-*, hot, ro) use gostack instead.

Go 特有的设计模式和最佳实践，包括函数式选项、小接口、依赖注入、并发模式、错误处理和包组织。适用于在 Go 代码中应用符合 Go 习惯的模式。

Golden-ratio design math: spacer calculator, spacing scale, grid widths, CSS vars, Tailwind setup.

Talk to any Figma file with your AI: ask what's in it, change it, or turn it into code.

GraphQL 让客户端精确获取所需数据，不多也不少；提供单一端点、带类型的 schema 和内省。但赋予它力量的灵活性也带来危险，缺乏恰当控制时，客户端可构造使服务器崩溃的查询。本技能涵盖 schema 设计、解析器、用 DataLoader 预防 N+1、微服务联邦，以及 Apollo/urql 客户端集成。核心观点：GraphQL 是契约，schema 就是 API 文档，应谨慎设计。

掌握现代 GraphQL 的联邦、性能优化和企业安全，构建可扩展 schema、实现高级缓存并设计实时系统。

一场不留情面的访谈，用以打磨计划或设计。

就计划或设计不断向用户提问，直到达成共识，逐一解决决策树的每个分支。当用户想要对计划进行压力测试、希望自己的设计被追问，或提到“grill me”时使用。

就某个计划或设计不断追问用户，直到决策树的每个分支都有明确记录的决定、不再有未决问题。适用于用户想对计划进行压力测试、希望其设计被反复质询，或提到“grill me”时。

一场不留情面的访谈，用于打磨计划或设计，同时在此过程中创建文档（ADR 和术语表）。

Grill a project's goal or design with the person until you share one understanding, and keep their actual answers in that project. Use when a person asks to grill or interview an idea for a specific project.

Apply AI-generated visual edits to video using xAI / Grok — change object colors, add effects (smoke, fire, sparkles), restyle scenes, or alter what's in a clip ("make the sunglasses red", "add smoke from the gun", "make it sparkly"). Use whenever an edit can't be done deterministically with ffmpeg/overlays and needs generative reimagining of the footage. Covers trimming, chunking, audio mux, and seamless reassembly.

Design brief, design system and pass or fail check that keep AI-built UIs from looking generated.

审计、重构和设计harness——围绕仓库或代理系统的定时运维脚本、漂移检查器、看门狗、带门控的数据管道。当辅助脚本已超过一屏、检查器不断增多，或harness子系统需要归属时使用。不适用于一次性脚本，也不适用于没有定时检查或门控运行的应用程序代码。

Configure Hermes model providers, transports and routing: provider entries, default-route switching, reasoning effort, delegation pins, per-profile copies, and proving a route with live signals. Use when a model 404s or rejects an endpoint, a profile ignores its key, config drifts between root and profiles, vision or image generation errors, or a relay's effort/cost looks wrong. Not for another harness's own model configuration.