'design-to-code' 검색 결과

Guide an iterative review of a built interface against its design brief, using critique and adjustment to improve visual alignment. This catalogue entry points agents to the upstream workflow, which requires a separate installation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Review a built interface against its design brief
• Refine visual differences through repeated adjustments
• Plan a design-to-code review cycle

Deploy Anima design-to-code service as a backend API endpoint. Use when building a design-to-code microservice, deploying Anima SDK as a serverless function, or creating an internal design tool API. Trigger with: "deploy anima", "anima service deploy", "anima serverless".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Apply production-ready patterns for the Anima SDK design-to-code pipeline. Use when building reusable Anima client wrappers, implementing output caching, or establishing team standards for design-to-code automation. Trigger with: "anima SDK patterns", "anima best practices", "anima code patterns".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Generate reviewable React or HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automated design-to-code pipeline. Trigger with: "anima hello world", "anima example", "figma to react", "figma to code", "anima generate code".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger with: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Production readiness checklist for Anima design-to-code pipelines. Use when deploying automated design-to-code services, preparing CI/CD Figma-to-code automation, or validating output quality before production. Trigger with: "anima production", "anima go-live", "anima prod checklist".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use this skill whenever the user wants to use AI agents to work with Penpot design files via the Penpot MCP Server. Triggers include: using Penpot through an AI agent, design files, design systems, design tokens, Penpot MCP, design-to-code, generating UI from design, auditing a design system, creating components/variants, renaming layers, exporting assets from Penpot, adding flows, interactions, animations, overlays, or prototyping in Penpot, or prompting an AI agent to read/modify a Penpot file. Also triggers when the user wants to set up Penpot MCP, connect any MCP-compatible AI agent or IDE to Penpot, or produce production-ready HTML/CSS/React from a Penpot design. Use this skill for Penpot-agent workflows — design, code, audit, prototyping, or setup.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Extract Lanhu design HTML, CSS, and assets through Lanhu MCP for Claude Code design-to-code workflows. Called by design-to-code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Clarify requests for visual output by adding design specifications and UI/UX vocabulary, the language of interfaces and user experience. Use it to refine prompts for screen design or workflows that turn designs into code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Clarifying a request for a visual design
• Refining prompts for turning designs into code
• Adding UI/UX vocabulary to a design request

Design, implement, or review native Mac interfaces using SwiftUI or AppKit. Organize panes, remove unnecessary containers, and apply restrained Liquid Glass effects while checking resizing, interaction states, and accessibility, including designs supplied through Figma.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Designing a native Mac app interface
• Reviewing screens with too many cards and borders
• Implementing a Figma design in SwiftUI

Implement interfaces from Figma designs using the Figma MCP server. Retrieve design structure, screenshots, variables, and assets, then adapt the generated code to existing project components and styles and check it against the design.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implementing a screen from a Figma frame link
• Reusing existing components to match a design
• Retrieving images and SVG assets from Figma

Turn Figma designs into React and TypeScript components using coderio. The workflow uses design thumbnails to guide layout, extracts component structure and data, and generates code and assets for integration into an application.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a React interface from a Figma design
• Organize component structure and input data
• Generate components while checking the design thumbnail

Turn a linked Figma frame or layer into application code using the Figma MCP server, a connection for accessing design data. Retrieve design details, screenshots, and assets, reuse existing project components, and compare the implementation with the design.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implementing a screen from a Figma frame link
• Retrieving images and SVG assets from a design
• Adapting a design to existing project components

Design web interfaces, build prototypes, and integrate changes into existing apps while respecting their visual rules and components. Choose direct code generation or Claude Code design commands, with an experimental browser canvas option for visual review.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Improve a landing page within an existing app
• Design a dashboard using existing visual rules
• Sync a codebase with Claude Design

Create and maintain Code Connect templates that link published Figma components to existing code components. Map text, variants, visibility settings, and nested components so the displayed code snippets reflect the selected design properties.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Linking Figma components to existing code components
• Creating Code Connect template files
• Mapping design variants to code properties

Turn Figma designs into screen code that fits an existing project. The workflow reuses existing components and shared style values, follows design notes, and uses exported images and icons to preserve the design’s appearance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implement a screen from a Figma design
• Reuse existing components when building a design
• Reproduce images and icons from exported assets

Turn a Figma design into code that fits an existing project. Reuse its components and shared style values, follow designer notes and component mappings, and adapt Figma's reference output to the project's framework and conventions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Implementing a screen from a Figma design
• Reusing existing project components in a design implementation
• Applying designer notes and shared style values

Create and maintain Code Connect templates that link published Figma components to existing code components. Map text, variants, toggles, and nested components so code examples reflect the selected component's design settings.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connect published Figma components to existing code
• Map design variants to component properties
• Reflect configurable nested components in code examples

Fetch design structure, screenshots, variables, and assets from Figma through MCP, a connection between the agent and Figma. Use these references to guide code implementation within an existing project and troubleshoot connection setup.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Inspecting a specific Figma frame or layer
• Fetching images and SVG assets for implementation
• Adapting a design to existing project components

Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server for generated components. Trigger with: "anima local dev", "anima dev loop", "anima preview", "anima iteration".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Configure CI/CD pipeline for automated Figma-to-code generation with Anima. Use when automating design-to-code in GitHub Actions, setting up PR-based component generation, or integrating Anima into design handoff workflows. Trigger with: "anima CI", "anima GitHub Actions", "anima automated generation".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Build automated Figma-to-React pipeline with the Anima SDK. Use when automating design handoff, building CI/CD design-to-code workflows, or creating a design system code generator from Figma components. Trigger with: "anima design pipeline", "figma to react pipeline", "automated design handoff", "anima component generator".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Use Figma webhooks to trigger automatic Anima code generation on design changes. Use when building event-driven design-to-code pipelines, auto-generating components when Figma files change, or integrating design updates into CI. Trigger with: "anima webhook", "figma webhook", "anima auto-generate on change".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trigger with: "anima error", "anima not working", "anima debug", "figma to code error".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.