Skip to content

feat: add figma interactive wizard command#255

Open
rubenmarcus wants to merge 2 commits intomainfrom
fix/figma-wizard-to-main
Open

feat: add figma interactive wizard command#255
rubenmarcus wants to merge 2 commits intomainfrom
fix/figma-wizard-to-main

Conversation

@rubenmarcus
Copy link
Member

Summary

What it does

New ralph-starter figma command with 4-step interactive wizard:

  1. Figma design URL (validated)
  2. Task description
  3. Tech stack (auto-detect from package.json + list + custom)
  4. Model selection (smart per-agent)

🤖 Generated with Claude Code

rubenmarcus and others added 2 commits February 26, 2026 14:32
New `ralph-starter figma` command with 4-step interactive wizard:
1. Figma design URL (validated)
2. Task description
3. Tech stack (auto-detect from package.json + list + custom)
4. Model selection (smart per-agent: Opus recommended for Claude)

Delegates to runCommand with pre-configured Figma options.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
showWelcome() is already called by runCommand(), so calling it in
figmaCommand() resulted in the welcome banner showing twice.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@chatgpt-codex-connector
Copy link

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@github-actions
Copy link
Contributor

✔️ Bundle Size Analysis

Metric Value
Base 2234.84 KB
PR 2251.72 KB
Diff 16.88 KB (0%)
Bundle breakdown
156K	dist/auth
32K	dist/automation
4.0K	dist/cli.d.ts
4.0K	dist/cli.d.ts.map
20K	dist/cli.js
12K	dist/cli.js.map
552K	dist/commands
28K	dist/config
4.0K	dist/index.d.ts
4.0K	dist/index.d.ts.map
4.0K	dist/index.js
4.0K	dist/index.js.map
808K	dist/integrations
84K	dist/llm
804K	dist/loop
188K	dist/mcp
32K	dist/presets
92K	dist/setup
40K	dist/skills
392K	dist/sources
76K	dist/ui
124K	dist/utils
336K	dist/wizard

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Feb 26, 2026

Greptile Summary

This PR cherry-picks the interactive ralph-starter figma wizard command that was accidentally merged into the wrong branch. The implementation adds a 4-step guided workflow: Figma URL input with validation, task description, tech stack selection (with auto-detection from package.json), and model selection (with dynamic agent detection). The wizard then delegates to the existing runCommand with pre-configured Figma options.

Key changes:

  • New /commands/figma.ts with interactive wizard using inquirer prompts
  • CLI registration in cli.ts with proper option handling
  • Auto-detection of project tech stack and available AI agents
  • Smart model recommendations based on detected agents

Issues found:

  • Validation regex inconsistency: allows 22+ character file keys but parser expects exactly 22
  • Style: uses interface instead of type for simple data structure (violates project convention)

Confidence Score: 4/5

  • This PR is safe to merge after addressing the validation regex bug
  • The PR adds a well-structured interactive wizard with good error handling and validation. One critical regex validation bug could cause unexpected behavior if users provide invalid file keys. Minor style issue with interface vs type. Otherwise the code follows existing patterns and properly delegates to tested functions.
  • Pay special attention to src/commands/figma.ts - verify the validation regex matches the parser's expectations

Important Files Changed

Filename Overview
src/cli.ts Added new figma command registration with proper option handling and delegation to figmaCommand
src/commands/figma.ts New interactive Figma-to-code wizard with 4-step flow; has validation regex mismatch and interface/type style issue

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    Start[User runs 'ralph-starter figma'] --> Welcome[Display welcome message]
    Welcome --> URLPrompt[Prompt: Enter Figma URL]
    URLPrompt --> ValidateURL{Validate URL}
    ValidateURL -->|Invalid| URLPrompt
    ValidateURL -->|Valid| TaskPrompt[Prompt: What to build?]
    TaskPrompt --> DetectStack[Detect tech stack from package.json]
    DetectStack --> StackPrompt[Prompt: Select tech stack]
    StackPrompt -->|Custom| CustomStack[Enter custom stack]
    StackPrompt -->|Preset| StackSelected[Stack selected]
    CustomStack --> StackSelected
    StackSelected --> DetectAgents[Detect available agents]
    DetectAgents --> ModelPrompt[Prompt: Select model]
    ModelPrompt -->|Custom| CustomModel[Enter custom model]
    ModelPrompt -->|Preset| ModelSelected[Model selected]
    CustomModel --> ModelSelected
    ModelSelected --> BuildTask[Build full task with tech stack]
    BuildTask --> DelegateRun[Call runCommand with options]
    DelegateRun --> End[Execute autonomous loop]
Loading

Last reviewed commit: 7f53471

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 files reviewed, 2 comments

Edit Code Review Agent Settings | Greptile

Comment on lines +18 to +25

interface FigmaWizardOptions {
mode?: string;
framework?: string;
commit?: boolean;
validate?: boolean;
maxIterations?: number;
agent?: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use type instead of interface for this simple data structure

Suggested change
interface FigmaWizardOptions {
mode?: string;
framework?: string;
commit?: boolean;
validate?: boolean;
maxIterations?: number;
agent?: string;
type FigmaWizardOptions = {
mode?: string;
framework?: string;
commit?: boolean;
validate?: boolean;
maxIterations?: number;
agent?: string;
};

Context Used: Rule from dashboard - Use type by default in TypeScript unless you specifically need interface features like extension... (source)

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI
This is a comment left during a code review.
Path: src/commands/figma.ts
Line: 18-25

Comment:
Use `type` instead of `interface` for this simple data structure

```suggestion
type FigmaWizardOptions = {
  mode?: string;
  framework?: string;
  commit?: boolean;
  validate?: boolean;
  maxIterations?: number;
  agent?: string;
};
```

**Context Used:** Rule from `dashboard` - Use `type` by default in TypeScript unless you specifically need `interface` features like extension... ([source](https://app.greptile.com/review/custom-context?memory=c862f053-5655-4b41-be69-c840e3c9f280))

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

message: 'Figma design URL:',
suffix: chalk.dim('\n (paste the full Figma file or frame URL)\n '),
validate: (input: string) => {
const trimmed = input.trim();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Validation regex allows 22+ characters but parseFigmaUrl expects exactly 22 for direct file keys

Suggested change
const trimmed = input.trim();
if (!isFigmaUrl(trimmed) && !/^[a-zA-Z0-9]{22}$/.test(trimmed)) {
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/commands/figma.ts
Line: 136

Comment:
Validation regex allows 22+ characters but `parseFigmaUrl` expects exactly 22 for direct file keys

```suggestion
        if (!isFigmaUrl(trimmed) && !/^[a-zA-Z0-9]{22}$/.test(trimmed)) {
```

How can I resolve this? If you propose a fix, please make it concise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant