메뉴
Responsive web design rules — breakpoints, auto-layout strategy, sizing patterns. Use when: responsive/breakpoint/mobile/tablet/desktop + design/layout/screen, or when creating multi-breakpoint web designs.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Import HTML or a web page into Figma using FigCraft's native import_html converter. Use when: html to figma, import html, import webpage, capture static page, convert HTML into editable Figma layers. For pixel-perfect live web capture, use official Figma MCP generate_figma_design as a visual reference when available.
Lint Figma designs for compliance and auto-fix violations. Use when: lint/fix/check compliance/clean up + design/page/screen, or when automated quality fixes are needed. Supports both quick one-step lint and granular multi-step workflows.
Android platform design rules — screen dimensions, Material Design 3, Roboto typography, navigation patterns. Use when: Android/Material + design/screen/app, or when creating Android-specific Figma designs.
iOS platform design rules — screen dimensions, safe areas, SF Pro typography, navigation patterns, HIG conventions. Use when: iOS/iPhone/iPad + design/screen/app, or when creating iOS-specific Figma designs.
Create UI in Figma using FigCraft declarative tools (create_frame, create_text, create_component). Use when: create/design/build/make + Figma/UI/screen/page/component/button/variant WITHOUT an existing design system. IMPORTANT: Use create_frame for screens, create_component for reusable components. Never use use_figma for UI creation. Do NOT use when assembling screens from existing design system (use figcraft-generate-design) or building a full design system (use figcraft-generate-library).
Generate documentation for Figma components — properties, variants, usage guidance, and structural health audit. Use when: document/describe/catalog + components/variants/library, or when auditing component quality for design system maintenance.
| name | responsive-design |
| description | Responsive web design rules — breakpoints, auto-layout strategy, sizing patterns. Use when: responsive/breakpoint/mobile/tablet/desktop + design/layout/screen, or when creating multi-breakpoint web designs. |
Rules and patterns for creating responsive web designs in Figma across mobile, tablet, and desktop breakpoints. Covers auto-layout strategy, sizing patterns, and common pitfalls.
Design rules are delivered by _workflow.designPreflight (from get_mode). For detailed rules by category, call get_design_guidelines(category).
For the full responsive layout reference at runtime:
get_creation_guide(topic: "responsive")
| Breakpoint | Width | Columns | Padding |
|---|---|---|---|
| Mobile | 375px | 1 | 16px |
| Tablet | 768px | 2 | 24px |
| Desktop | 1280px | 3–4 | 32–64px |
| Context | Horizontal | Vertical |
|---|---|---|
| Page container | FIXED (breakpoint width) | HUG |
| Content area | FILL | HUG |
| Sidebar | FIXED (240–300px) | FILL |
| Cards in grid | layoutGrow: 1 (equal width) | HUG |
| Full-width sections | FILL | HUG |
Build one frame per breakpoint, side by side:
create_frame (wrapper, HORIZONTAL, itemSpacing: 40, clipsContent: false)
├── Mobile frame (375 × HUG)
├── Tablet frame (768 × HUG)
└── Desktop frame (1280 × HUG)
Design the mobile layout first — it forces content prioritization.
Expand to 2-column layouts where appropriate. Keep single-column for forms and focused content.
Add sidebar navigation, expand grids to 3–4 columns, increase padding.
Use verify_design on each breakpoint frame to check for overflow and layout issues.