xiaodong-wu/web-design-studio
Overview
This skill creates complete, production-grade web pages that combine polished frontend design with automatically generated images. It delivers responsive HTML/CSS/JS, all visual assets saved into an images/ folder, and a final client-ready design specification. Use it when you need a fully implemented page—no placeholder images, no handoffs required.
How this skill works
The skill follows a two-step flow: design the interface with a clear aesthetic direction, accessibility and performance constraints, then identify and generate every image the layout requires. Image generation is automated via a provided script that saves assets into images/ with descriptive filenames and selectable resolutions. After images are verified, the skill injects optimized image references into responsive HTML/CSS/JS and produces a mandatory design documentation file for handoff.
When to use it
- Building complete landing pages with hero banners and marketing imagery
- Creating dashboards or web apps that need custom illustrations and icons
- Producing product pages, portfolios, or blog layouts with featured images
- Designing marketing sites where visuals must match a precise aesthetic
- Any web interface that must ship with finished, optimized image assets
Best practices
- Design first, then generate images to match the chosen aesthetic and layout
- Write descriptive, aesthetic-specific prompts for each image to ensure consistency
- Choose image resolution by purpose: 1K for thumbnails, 2K for product shots, 4K for hero backgrounds
- Keep filenames descriptive and timestamped to maintain a clear images/ directory
- Always run the image verification script after building HTML to catch path or missing-file issues
- Generate the required design document from the final HTML to complete delivery
Example use cases
- Coffee shop landing page with warm, organic hero and product shots (images auto-generated and referenced)
- SaaS dashboard with custom illustration set and animated micro-interactions
- E-commerce product page with studio-style product images and responsive gallery
- Agency portfolio site using distinctive typography, unique backgrounds, and generated hero art
- Marketing campaign microsite with multiple hero banners and decorative section textures
FAQ
Yes. Provide a Gemini API key via the --api-key argument or set GEMINI_API_KEY in the environment.
How do I confirm images are correctly referenced in the HTML?
Run the included verify_images.py script; it checks HTML references, file existence, and common path issues before finalizing the project.
