Design Implementer Skill

This skill implements Figma designs from Linear tickets or direct Figma URLs into production-ready Flutter components.

Prerequisites

•Linear MCP Server: Must be configured for ticket lookup
•Figma MCP Server: Must be configured for design context and screenshots
•Input: Linear ticket ID (e.g., KEPLR-1578) OR Figma URL
•
Optional Parameters:
- •examples: widgetbook or none (if not provided, will ask user)

Workflow

Follow these steps in order. Do not skip steps or proceed without completing each one.

Step 1: Parse Input and Gather Context

If Linear ticket ID provided:

•Detect pattern: [A-Z]+-\d+ (e.g., KEPLR-1578, LIN-123)
•Call mcp__linear__get_issue(id=":ticketId") to fetch ticket details
•Extract all Figma links from ticket description and comments
•If multiple Figma links found, ask user: "Multiple Figma links found. Which design should I implement?"
•Store selected Figma URL for next step

If Figma URL provided directly:

•Validate URL format: https://figma.com/design/:fileKey/:fileName?node-id=X-Y
•Store URL for next step

Output: Confirmed Figma URL to implement

Step 2: Confirm Example Generation

•Check if examples parameter was provided via slash command
•If not provided, ask user: "Should I generate Widgetbook examples? (widgetbook/none)"
•Store example choice: widgetbook or none

Output: Confirmed example generation preference

Step 3: Fetch Design Context

•
Parse Figma URL:
- •Extract fileKey: segment after /design/ (or /branch/ if branch URL)
- •Extract nodeId: value of node-id query parameter
- •Convert nodeId format: X-Y → X:Y for API calls

•

Fetch design context:

code

mcp__figma__get_design_context(
  fileKey=":fileKey",
  nodeId=":nodeId",
  clientLanguages="dart",
  clientFrameworks="flutter"
)

•

Fetch design screenshot:

code

mcp__figma__get_screenshot(
  fileKey=":fileKey",
  nodeId=":nodeId",
  clientLanguages="dart",
  clientFrameworks="flutter"
)

•
If design context is truncated:
- •Call mcp__figma__get_metadata(fileKey=":fileKey", nodeId=":nodeId") to get structure
- •Identify child node IDs
- •Fetch each child individually with get_design_context
•
Check for Code Connect mappings:
code
```
mcp__figma__get_code_connect_map(
  fileKey=":fileKey",
  nodeId=":nodeId"
)
```
- •If mappings exist, review existing component implementation
- •Use existing patterns as reference

Output: Full design context, screenshot, and any existing code mappings

Step 4: Analyze Design and Present Implementation Plan

Analysis:

•Identify component name from Figma layer name
•Detect variants (e.g., primary/secondary/ghost)
•Detect sizes (e.g., sm/md/lg)
•Detect states (e.g., default/hover/active/disabled/loading)
•List all props needed based on design properties
•Identify similar existing components in codebase

Implementation Plan: Present a clear plan to user:

code

Component: [ComponentName]
Platform: Flutter

Files to create:
- packages/flutter/lib/src/components/dsp_[component_name].dart
- apps/widgetbook/lib/design_system/components/[component]/showcase/[component]_showcase.dart (if examples requested)

Files to modify:
- packages/flutter/lib/design_system_playground.dart (add export)
- apps/widgetbook/lib/main.dart (register showcase if examples requested)

Detected properties:
- Variants: [list]
- Sizes: [list]
- States: [list]
- Other props: [list]

Reference components:
- [Similar component 1]
- [Similar component 2]

CRITICAL: Ask user for confirmation before proceeding: "Does this plan look correct? Should I proceed with implementation?"

Output: User-approved implementation plan

Step 5: Implement Component

Component Location: packages/flutter/lib/src/components/

•
Read reference patterns:
- •Consult references/flutter-patterns.md for template and community standards
- •Review existing dsp_button.dart for structure
- •Review ../theme/dsp_theme.dart for theme access
- •Review ../../tokens.dart for available tokens
•
Create component file:
- •Use StatefulWidget pattern for interactive components
- •Define variant/size enums with Dsp prefix
- •Implement hover/press state tracking
- •Use DspTheme.of(context) for theme access
- •Use DspTokens.* for design tokens (NEVER hardcode values)
- •Implement all variants and states from design
- •Use AnimatedContainer for smooth transitions
- •Follow Effective Dart style guidelines
- •Apply widget composition best practices
- •Apply StatefulWidget performance patterns
•
Export component:
- •
  Add export to packages/flutter/lib/design_system_playground.dart:
  dart
  export 'src/components/dsp_component_name.dart';

Custom Rules:

•Consult references/implementation-rules.md for project-specific guidelines
•Follow any additional rules defined there

Output: Component file created and exported

Step 6: Generate Examples (if requested)

For Widgetbook (Flutter):

•
Create showcase file: apps/widgetbook/lib/design_system/components/[component_name]/showcase/[component_name]_showcase.dart
•
Follow existing Widgetbook patterns:
- •Import component from package:design_system_playground/design_system_playground.dart
- •Create showcase with knobs for all properties
- •Show all variants and sizes
- •Demonstrate all states (default, hover, disabled, loading, etc.)

•

Register in main.dart:

•Add to appropriate WidgetbookFolder in apps/widgetbook/lib/main.dart

•Example:

dart

WidgetbookLeafComponent(
  name: 'ComponentName',
  useCase: WidgetbookUseCase(
    name: 'Component Showcase',
    builder: (context) => const ComponentNameShowcase(),
  ),
),

Output: Widgetbook showcase created and registered

Step 7: Validate Implementation

Visual Validation:

•Compare component against Figma screenshot
•Verify all variants match design
•Verify all states implemented (hover, active, disabled, etc.)
•Check spacing, colors, typography match design tokens

Code Validation:

•✅ No hardcoded values (all use theme/tokens)
•✅ All variants from design implemented
•✅ Component exported in index file
•✅ Enums defined for variants/sizes
•✅ Follows existing patterns from reference files
•✅ Examples created (if requested)

Build Recommendation:

•Run: yarn widgetbook
•Or: cd apps/widgetbook && flutter run -d chrome

Output: Validation report and build instructions

Implementation Rules

Custom Rules

For detailed project-specific rules, consult:

•references/implementation-rules.md - User-defined custom rules

Default Rules

General:

•NEVER hardcode values - always use design tokens
•Match Figma design exactly (1:1 visual fidelity)
•Follow existing component patterns in codebase
•Use semantic naming for variants and props

Flutter Specific:

•Prefix all components with Dsp (e.g., DspButton, DspCheckbox)
•Use snake_case with dsp_ prefix for file names (e.g., dsp_button.dart)
•Use StatefulWidget for interactive components
•Track hover/press state when needed
•Use AnimatedContainer for transitions (150ms)
•Use DspTheme.of(context) for theme access
•Use DspTokens.* for design tokens
•Follow Effective Dart style guidelines
•Apply widget composition best practices
•Apply StatefulWidget performance patterns

Reference Files

Flutter Patterns

Location: references/flutter-patterns.md

Key patterns:

•StatefulWidget structure
•Hover/press state tracking
•Theme integration
•Variant/size enums
•AnimatedContainer transitions
•Community standards (Effective Dart, Widget Composition, StatefulWidget Performance)

Implementation Rules

Location: references/implementation-rules.md

Project-specific guidelines and conventions (user-editable).

Example Scenarios

Scenario 1: Linear Ticket with Flutter Component

Input:

code

/implement-design KEPLR-1578

Actions:

•Fetch Linear ticket KEPLR-1578
•Extract Figma link from description
•Ask user about examples → widgetbook
•Fetch Figma design context and screenshot
•Present plan: "Implementing Checkbox component for Flutter with Widgetbook showcase"
•Create packages/flutter/lib/src/components/dsp_checkbox.dart
•Export in packages/flutter/lib/design_system_playground.dart
•Create apps/widgetbook/lib/design_system/components/checkbox/showcase/checkbox_showcase.dart
•Register in apps/widgetbook/lib/main.dart
•Validate against design

Scenario 2: Direct Figma URL with Examples

Input:

code

/implement-design https://figma.com/design/abc123/file?node-id=21-45 --examples widgetbook

Actions:

•Parse Figma URL directly (fileKey=abc123, nodeId=21:45)
•Examples already specified: widgetbook
•Fetch Figma design context and screenshot
•Present plan with detected component properties
•Create Flutter component file
•Export in package file
•Create Widgetbook showcase
•Validate against design

Scenario 3: Linear Ticket with Multiple Figma Links

Input:

code

/implement-design LIN-123 --examples none

Actions:

•Fetch Linear ticket LIN-123
•Find 3 Figma links in description
•Ask user: "Found 3 Figma links. Which should I implement?"
•User selects link #2
•Examples already specified: none
•Continue with implementation workflow (no Widgetbook showcase)

Error Handling

Linear ticket not found:

•Display error message
•Ask user to verify ticket ID
•Suggest checking Linear workspace

Figma link not found in Linear ticket:

•Display error message
•Ask user to provide Figma URL directly
•Suggest adding Figma link to ticket

Invalid Figma URL:

•Display error message with expected format
•Ask user to provide correct Figma URL

Design context truncated:

•Use get_metadata to get structure
•Fetch child nodes individually
•Inform user of fallback approach

Success Criteria

✅ Component matches Figma design visually (1:1) ✅ All variants implemented ✅ All states implemented (hover, active, disabled, etc.) ✅ No hardcoded values (uses design tokens) ✅ Component exported in package index ✅ Examples created (if requested) ✅ Follows existing patterns ✅ Enums defined for variants/sizes ✅ Follows community standards (Effective Dart, Widget Composition, StatefulWidget Performance) ✅ Build succeeds without errors