[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-4413":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},4413,"draw-ui","oil-oil\u002Fdraw-ui","oil-oil","Claude Code skill: generate UI design mockups with GPT Image 2 via ZenMux",null,"Python",197,37,46,1,0,7,19,110,21,75.24,false,"main",true,[],"2026-06-12 04:00:22","# draw-ui — AI UI Design Skill\n\nA universal AI skill that generates UI design mockups and helps reconstruct generated UI screenshots into HTML\u002FCSS. Prefer the runtime's built-in image generation when available; use **GPT Image 2** via the ZenMux API for scripted local outputs.\n\n---\n\n## What it does\n\n- Generates high-quality UI mockups from natural language descriptions\n- Locks navigation\u002Fsidebar consistency across multiple screens using a reference image\n- Uses proven prompt techniques (analogy-style or inventory-style) for better design quality\n- Handles GPT Image 2's `edit_image` API quirks automatically (serial execution, retries)\n- Guides HTML reconstruction with asset strategy, browser screenshot comparison, and background-removal rules for logos and illustrations\n\n## Requirements\n\n- An AI agent that supports the skills protocol (Claude Code, Cursor, etc.)\n- For scripted image generation: a **ZenMux API key** — set as `ZENMUX_API_KEY` env var, in `.env.local`, or in `~\u002F.config\u002Fsee\u002Fapi_key`\n- Python 3 (auto-installs `google-genai` on first run)\n\n## Installation\n\n```bash\nnpx skills add oil-oil\u002Fdraw-ui\n```\n\nOr clone manually:\n\n```bash\nmkdir -p ~\u002F.claude\u002Fskills\ngit clone https:\u002F\u002Fgithub.com\u002Foil-oil\u002Fdraw-ui ~\u002F.claude\u002Fskills\u002Fdraw-ui\n```\n\n## Usage\n\nTrigger by saying anything like:\n\n> 帮我设计一个 Dashboard 页面  \n> Design a user profile screen  \n> 出图，产品详情页\n\nThe agent will ask you a few questions first (what the page does, whether you have a reference screenshot, consistency requirements), then generate.\n\n### Manual usage via shell\n\n```bash\n# No reference image\nscripts\u002Fask_draw.sh --type wide --name \"dashboard\" --prompt \"...\"\n\n# With reference image (locks sidebar\u002Fnav consistency)\nscripts\u002Fask_draw.sh \\\n  --frame \u002Fpath\u002Fto\u002Fsidebar-reference.png \\\n  --type wide \\\n  --name \"dashboard\" \\\n  --prompt \"...\"\n```\n\n### Aspect ratio options\n\n| `--type` | Ratio | Use case |\n|----------|-------|----------|\n| `wide` | 16:9 | Desktop app screens (default) |\n| `classic` | 4:3 | Dashboard, data-heavy layouts |\n| `square` | 1:1 | Cards, modals |\n| `portrait` | 3:4 | Mobile screens |\n\n## Key concepts\n\n**Reference image strategy**\n\nThe reference image constrains what AI will copy. If your screenshot has existing content in the main area, AI will mimic that layout — limiting creative freedom.\n\nBest practice: use a \"clean frame\" — a screenshot with only the sidebar\u002Fnav visible and the content area blank. This lets AI keep your chrome consistent while designing the content area freely.\n\n**Prompt writing**\n\nDon't write layout specs (pixels, columns, padding). Instead, describe the *business* using one of two approaches:\n\n- **Analogy** — \"Like reading the sheet music behind a hit song. Think Notion's calm meets a music producer's notes.\" → best for creative quality\n- **Inventory** — \"The page shows: user name, 30-day trend chart, active campaigns list with status badges.\" → most reliable for accuracy\n\nAlways use real example data instead of placeholders. `\"2.3M views\"` produces a far more realistic output than `\"show view count\"`.\n\n**HTML reconstruction**\n\nWhen turning a generated mockup or screenshot into HTML\u002FCSS, split the work into code and assets:\n\n- Build layout, cards, buttons, text, filters, and ordinary line icons with HTML\u002FCSS\u002FSVG.\n- Generate standalone image assets for brand logos, empty-state illustrations, glassy\u002F3D visuals, complex gradients, and other hard-to-code visual details. Use crops only as references for image-to-image redraw, not as final assets unless the source is already high-resolution and background-clean.\n- Do not mix large illustrations, logos, and small icons in the same sprite sheet. Generate large illustration assets separately.\n- For vendor logo rows, dark wordmarks, and small dark icons, generate a large pure-white source image and remove the white background conservatively. This avoids green fringing and protects thin strokes.\n- For colorful illustrations and product visuals, use green-screen or real transparent output when available; white-background keying can damage white cards and highlights.\n- If an icon sprite sheet is needed, make it machine-cuttable: pure white background, exact 4x4 grid, no borders, no labels, no shadows, no overlap, and each icon centered with wide padding.\n\nThis keeps the HTML clean while preserving the visual parts that image generation is best at.\n\n## License\n\nMIT\n","draw-ui 是一个基于 AI 的 UI 设计工具，能够根据自然语言描述生成高质量的 UI 设计草图，并支持将生成的设计截图重构为 HTML\u002FCSS 代码。该项目利用 Claude Code 技能协议和 ZenMux API 来实现图像生成，支持多种屏幕比例选项，并通过参考图片锁定导航或侧边栏的一致性。此外，它还采用经过验证的提示技术（如类比式或清单式）以提高设计质量，并自动处理 GPT Image 2 的 `edit_image` API 特性。适用于需要快速原型设计、UI 重构或创意灵感激发的场景。",2,"2026-06-11 02:59:52","CREATED_QUERY"]