跳至主要内容
小龙虾小龙虾AI
🤖

Pencil To Code

Export .pen design to React/Tailwind code. Does ONE thing well. Input: .pen frame ID or file path Output: React component code + Tailwind config Use when: design-exploration or user needs implementation code from a finalized Pencil design.

下载740
星标0
版本0.1.0
开发工具
安全通过

如何使用「Pencil To Code」？

  1. 打开小龙虾AI（Web 或 iOS App）
  2. 点击上方「立即使用」按钮，或在对话框中输入任务描述
  3. 小龙虾AI 会自动匹配并调用「Pencil To Code」技能完成任务
  4. 结果即时呈现，支持继续对话优化

相关技能

🤖
Pencil Renderer

Render DNA codes to Pencil .pen frames. Does ONE thing well. Input: DNA code + component type (hero, card, form, etc.) Output: .pen frame ID + screenshot Use when: design-exploration or other orchestrators need to render visual proposals using Pencil MCP backend.

769 下载设计媒体💬 Prompt
🤖
Figma Sync

Read Figma files, extract design tokens, generate React Native Expo TS or Web React + Tailwind code, write back to Figma, and diff local models against Figma for minimal patches. Triggers: "pull figma", "sync figma", "figma to code", "push to figma", "diff figma", "extract design tokens", "generate from figma", "preview figma changes"

953 下载开发工具
🤖
Loopwind

Generate images and videos from React + Tailwind CSS templates using the loopwind CLI.

320 下载设计媒体💬 Prompt
🤖
Design To Code

Implements UI from design mockups (Figma, Sketch, or image) with pixel-accurate layout, responsive behavior, and design tokens. Use when 还原设计图, implementing...

64 下载开发工具
🤖
Excalidraw Creator

Create hand-drawn style Excalidraw diagrams, flowcharts, and architecture visuals as PNG images

313 下载设计媒体⚙️ 脚本
🤖
React Nextjs Generator

Generates complete React Next.js projects from requirements and UI designs using Ant Design, Tailwind CSS, and Zustand for state management.

89 下载开发工具