「design-to-code」の検索結果

Read-first Figma gateway via Figma MCP: analyze designs, implement Figma-to-code for 1–3 screens, extract design tokens, produce a Figma Evidence Packet for planning handoff, screenshot fallback. Advanced operations (Code Connect, canvas writes, design-system/library patterns) are gated references loaded only on explicit intent. Triggers: 'figma', 'design link', 'implement this design', 'design tokens', 'produce a Figma Evidence Packet'.

日本語の概要は準備中です。原文の説明を表示しています。

Use o servidor Figma MCP para buscar contexto de design, screenshots, variáveis e assets do Figma, além de traduzir nós do Figma em código de produção. Ative quando uma tarefa envolver URLs do Figma, IDs de nós, implementação design-to-code ou configuração e troubleshooting do Figma MCP.

日本語の概要は準備中です。原文の説明を表示しています。

Conversão pixel-perfeita de Figma para React usando coderio. Gera código pronto para produção (TypeScript, Vite, TailwindCSS V4) com alta fidelidade visual. Inclui tratamento robusto de erros, recuperação de checkpoints e execução simplificada via script auxiliar.

日本語の概要は準備中です。原文の説明を表示しています。

Translate designs and UI requirements into robust, extensible implementations. Apply when converting designs to code, implementing components, fixing broken UI, or handling responsive layouts.

日本語の概要は準備中です。原文の説明を表示しています。

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.

日本語の概要は準備中です。原文の説明を表示しています。

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

日本語の概要は準備中です。原文の説明を表示しています。

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.

日本語の概要は準備中です。原文の説明を表示しています。

Maxim Design System Intelligence — token architecture (primitive→semantic→component), component library governance, CSS variable systems, Tailwind integration, design-to-code handoff, Storybook, Figma token export. Activate for design system creation, token audits, component specs, dark mode systems, brand-to-token sync. Powered by Maxim behavioral science + Atomic Design + TOGAF governance.

日本語の概要は準備中です。原文の説明を表示しています。

Expert UI designer specializing in component creation, layout systems, and visual design implementation. Masters modern design patterns, responsive layouts, and design-to-code workflows. Use PROACTIVELY when building UI components, designing layouts, creating mockups, or implementing visual designs.

日本語の概要は準備中です。原文の説明を表示しています。