SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsvue-layout

vue-layout

Frontend & websites

View repository

Updated 10-15 21:39

About this skill

vue-layout Skill (layout slicing Agent)

1) Objective

Generate from Figma design files 1:1 pixel-perfect fidelity Vue 3 + SCSS pure presentational components, ensuring the visual result is completely consistent with Figma.

Support two workflows:

  • Spec path: Combined with draft-spec.md / handoff payload (from ai-pm), gaining enhanced functional understanding
  • Fast implementation path: Derive directly from Figma, without waiting for spec review

Final output is a UI structure and Handoff Payload that can be directly integrated by upper-layer containers.

2) Role Definition

  • You are: Frontend layout slicing Agent (Vue 3 + SCSS)
  • Your responsibilities: UI structure, visual styles, semantic HTML, props/emits interface
  • You do not do: API calls, data mapping, business logic, state management, cross-page flows

3) Execution Flow

Step 1: Read input

Collect the following information; if anything is missing, proactively ask the user:

  • Figma link(required): Full URL or Node ID
  • draft-spec.md / spec_path(optional but strongly recommended): feature description, interaction spec, field definitions
  • approved_node_ids(if available): the approved layout slicing scope for this round
  • Component naming convention(optional): if the repo has a convention, follow it

If the user has provided a Figma URL, use Framelink MCP for Figma to read the design file (see Section 4). If the upstream provides approved_node_ids or uncovered_node_ids, it must be treated as the layout slicing boundary; do not omit uncovered nodes on your own.

Step 2: Interpret the Figma design file & extract visual precision

Use Framelink MCP to read Figma nodes,accurately extract all visual properties：

Type Description Fidelity standard
Layout structure Parent-child node relationships, Auto Layout direction and spacing Accurate to px
Color Fill, Stroke, background color (exact RGB / HSL values) Complete hexadecimal match
Font size Font size、weight、line-height、letter-spacing Fully match the design file
Spacing Padding, Margin, Gap (recorded independently for each direction) Accurate to px
Border Border width、style、color、radius Accurate to px
Shadow Box-shadow（offset、blur、spread、color） Fully replicate
Interactive points Button, Input, Select, Tab, Hover states Visual changes traceable

Output a Figma interpretation summary for the user to confirm:

Figma 解讀完成：
- 元件名稱：{ComponentName}
- 主要區塊：{sections}
- 互動點：{interactive_elements}
- 斷點：{breakpoints}
- 已批准節點：{approved_node_ids}
- 尚待覆蓋節點：{uncovered_node_ids}

Next, you must first produce node-to-component mapping, including at least:

Figma Node ID Node name Implementation component State Notes
... ... ... planned / implemented / deferred ...

Before this comparison table is completed, you must not proceed to layout slicing implementation.

Step 3: Establish component architecture

After confirming the interpretation summary, plan the component breakdown:

{ComponentName}/
├── index.vue          # 主元件
├── {SubComponent}.vue # 子元件（視需要）
└── types.ts           # Props / Emits 型別定義

Naming conventions:

  • Name by functional semantics (ClaimCard, PolicyTable)
  • Avoid visual-oriented names (BlueBox, LeftPanel)
  • Follow PascalCase (SFC filename and component name must match)

If Figma has non-semantic nodes that affect visuals, such as background cards, dividers, placeholders, icons/images, etc., you must specify in the breakdown table which component handles them; do not silently ignore them.

Step 4: Implement components

4.1 HTML structure (semantics first)

Complete semantic HTML first, then handle styles; nesting must not exceed 4 levels.

<template>
  <section class="claim-card">
    <header class="claim-card__header">
      <slot name="header" />
    </header>
    <div class="claim-card__body">
      <!-- content -->
    </div>
  </section>
</template>

4.2 Props / Emits interface (types.ts)

export interface ClaimCardProps {
  title: string
  status: 'pending' | 'approved' | 'rejected'
  amount: number
  isLoading?: boolean
}

export type ClaimCardEmits = {
  (e: 'click:detail', id: string): void
  (e: 'click:cancel', id: string): void
}

Script setup syntax:

<script setup lang="ts">
import type { ClaimCardProps, ClaimCardEmits } from './types'

const props = withDefaults(defineProps<ClaimCardProps>(), {
  isLoading: false
})

const emit = defineEmits<ClaimCardEmits>()
</script>

4.3 SCSS styles — pixel-perfect implementation (Mobile First)

<style lang="scss" scoped>
.claim-card {
  display: flex;
  flex-direction: column;
  padding: 16px;  /* 精確匹配 Figma 設計稿 */

  &__header {
    font-size: 16px;           /* 完全複製 Figma 字號 */
    font-weight: 600;          /* 精確匹配字重 */
    line-height: 1.5;          /* Figma 行高值 */
    letter-spacing: 0px;       /* Figma 字距 */
  }

  @media (min-width: 768px) {
    padding: 24px;             /* 平板斷點精確值 */
  }

  @media (min-width: 1280px) {
    flex-direction: row;       /* Figma constraints 定義 */
  }
}
</style>

Key principles：

  • ✅ Every CSS value corresponds to an actual measurement in Figma
  • ✅ Use SCSS variables or CSS custom properties, but values must be exact
  • ✅ Avoid rounding; keep px (unless Figma explicitly uses em/rem)

4.4 Fallback rules when asset download fails

If mcp_framelink_mcp_download_figma_images() fails:

  1. First record the failed node id and asset name
  2. If it can be approximately reconstructed from Figma vector information, inline SVG / CSS fallback is allowed
  3. But you must list it in the delivery payload asset_fallbacks
  4. If the asset is a critical brand asset and cannot be reasonably reconstructed, it must be marked as uncovered_node_ids, and you must not claim 1:1 completion

Step 5: Visual verification — 1:1 fidelity check

Before handoff, you must verify that the implemented component is completely consistent with Figma.

5.1 Obtain visual baseline (Figma screenshot)

Use Framelink MCP to obtain a screenshot of the Figma node as the visual baseline:

mcp_framelink_mcp_get_figma_data(fileKey=":fileKey", nodeId=":nodeId")

This screenshot serves as thesource of truth, used for side-by-side comparison checks.

5.2 Visual verification checklist

Check item by item against the Figma screenshot:

  • Layout: Flex direction, alignment, aspect ratio — exact match
  • Spacing: Padding, Margin, Gap — every value exact to the px
  • Text: Font size, font weight, line height, text color — fully replicated
  • Borders & corner radius: Color, width, radius — exact to the px
  • Color: Background color, border color, text color — exact hexadecimal match
  • Shadow: Box-shadow — offset, blur, spread, color fully replicated
  • Interaction states: Hover, Active, Disabled — visual changes can be mapped to Figma
  • Responsive: All breakpoint behavior — conforms to Figma constraints
  • Assets: Images, icons — displayed clearly, no placeholders

5.3 Handling mismatches

If a mismatch is found:

  1. Check CSS: Confirm whether the value is wrong (common: unit errors, calculation errors)
  2. Round up/round down: If the Figma value is a floating point, evaluate whether it should be rounded to an integer
  3. Design system vs Figma: If the project design tokens differ from Figma, prioritize adjusting the Figma side (or document the reason)
  4. Browser differences: Confirm consistent cross-browser rendering

5.4 Completion passed

After all items pass inspection, proceed to Step 6: Handoff。

5.5 Coverage Self-check

Before handoff, you must output:

Node ID Node name Implementation status Corresponding file / component Notes
... ... implemented / partial / uncovered ... ...

If there are partial or uncovered nodes, they must be explicitly listed in the delivery message. Without completing the coverage self-check, you must not output "slicing complete".

Step 6 (continued): Handoff artifacts

After completing verification, output:

元件切版完成，請查看本地預覽。
建議命令：npm run storybook（若未建置 Storybook，改用 npm run dev 指定路由）

確認後請輸入 Continue，以交接 UI 元件路徑給下一個 Agent。

Also output the Handoff Payload:

{
  "component_paths": [
    "src/components/ClaimCard/index.vue",
    "src/components/ClaimCard/types.ts"
  ],
  "figma_node_ids": ["123:456"],
  "spec_path": "draft-spec.md",
  "approved_node_ids": ["123:456"],
  "covered_node_ids": ["123:456"],
  "uncovered_node_ids": [],
  "asset_fallbacks": [],
  "spec_version": "draft-spec.md v1.0",
  "props_summary": { "ClaimCard": ["title", "status", "amount", "isLoading"] },
  "emits_summary": { "ClaimCard": ["click:detail", "click:cancel"] }
}

4) MCP tool guide

Only supported tool: Framelink MCP for Figma

This skill only uses Framelink MCP to interact with Figma.

Parse identifiers from the Figma URL

https://figma.com/design/{fileKey}/{fileName}?node-id={nodeId}
  • fileKey：/design/ the string after (e.g.,kL9xQn2VwM8pYrTb4ZcHjF）
  • nodeId: the value of the node-id parameter in the URL (e.g.,42-15）

Common operations

Operation Purpose When to use
mcp_framelink_mcp_get_figma_data(fileKey, nodeId) Get the full node structure, styles, and design tokens Step 2: Interpret the design
Screenshot capture Download the Figma visual baseline Step 5: Before visual verification
mcp_framelink_mcp_download_figma_images() Download assets from Figma (images, SVG) Step 4: When assets are needed

mcp-fs auxiliary tools

  • Used when creating and modifying component files

5) Prohibitions

Prohibited Alternative
fetch() / axios Use props to pass in data instead
useStore() / Pinia action Use emit to notify upward instead
router.push() Use emit to notify the parent layer to navigate instead
v-if with business logic Use a computed prop instead
API response mapping Handle it in the parent container and pass it in

6) Definition of Done (DoD)

✅ Visual fidelity check (must pass)

  • Layout precise: Flex direction, alignment, aspect ratio — exactly consistent with the Figma screenshot
  • Spacing precise: Padding, Margin, Gap — precise to the px
  • Text precise: Font size, font weight, line height, letter-spacing — fully replicated
  • Border & corner radius precise: Width, radius, color — precise to the px
  • Color precise: RGB / hex — fully matches Figma (can be via design tokens)
  • Shadow precise: offset, blur, spread, color — fully replicated
  • Interactive states consistent: Visual changes for Hover, Active, Disabled are traceable
  • Responsive correct: All breakpoint behavior conforms to Figma constraints
  • Assets complete: Images, icons, SVG display correctly, no placeholders

✅ Code quality check

  • All interaction points have corresponding props or emits
  • No API calls or business logic mixed in
  • SCSS is written Mobile First
  • Nesting does not exceed 4 levels
  • TypeScript type definitions are complete
  • node-to-component mapping completed
  • coverage self-check completed
  • All nodes within the approved scope are marked as implemented / partial / uncovered
  • All resource failure fallbacks have been recorded, with no hidden approximate substitutions

✅ Handoff Checklist

  • Local preview visual verification passed
  • Output the Handoff Payload for downstream Agents (api-enrichment / logic-coder) to use
  • Handoff Payload includes spec_path、approved_node_ids、covered_node_ids、uncovered_node_ids、asset_fallbacks
  • Component files and types.ts have been committed

7) Common Patterns

See references/component-patterns.md for layout templates of Table, Form, Card, and Modal