skills.rest
bjornslib
bjornslibCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

website-ux-design-concepts

Generate visual design concepts and mockups from UX audit findings.

Updated Aug 27, 2026
Search Tags:#workflow#ux-design#generate#mockups#html-css#design-concepts
One-click install
npx skills add https://github.com/bjornslib/cobuilder-harness --skill website-ux-design-concepts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-ux-design-concepts
Source: https://github.com/bjornslib/cobuilder-harness/tree/main/.claude/skills/website-ux-design-concepts
Command: npx skills add https://github.com/bjornslib/cobuilder-harness --skill website-ux-design-concepts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai>=1.0.0, pillow>=10.0.0, python-dotenv>=1.0.0, and includes scripts (resource) components.

What problem does it solve?

Translates UX audit findings and design briefs into concrete visual design concepts, ready-to-use mockups, and optional HTML/CSS deliverables to streamline the design-to-code workflow.

Core Features & Use Cases

  • Generate visual design concepts and mockups from UX recommendations, with optional HTML/CSS output for frontend integration.
  • Support dual engines (Stitch MCP by default for pixel-accurate HTML/CSS and screenshots, and Gemini for creative exploration) to cover both precise and exploratory design work.
  • Enable multi-section design workflows with artifact exports and project manifests for downstream development.

Quick Start

Provide a design brief or UX audit to generate design concepts and mockups, with optional HTML/CSS deliverables.

Frequently Asked Questions about website-ux-design-concepts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn UX audit findings into visual design concepts and mockups?▼

You can generate visual design concepts and mockups by providing a UX brief or audit findings to the Skill. It translates these inputs into ready-to-use design concepts, optional HTML/CSS deliverables, and project manifests for downstream development.

Can I generate HTML and CSS mockups directly from a UX design brief?▼

Yes, you can generate HTML and CSS deliverables directly from a UX design brief. The Skill uses the Stitch MCP engine by default to produce pixel-accurate HTML/CSS and screenshots, streamlining the design-to-code workflow.

What is the best way to explore creative design concepts versus generating pixel-accurate mockups?▼

To explore creative design concepts versus pixel-accurate mockups, the Skill supports dual engines: Gemini for creative exploration and Stitch MCP for precise HTML/CSS output. You can switch engines based on your specific design phase needs.

Do I need specific dependencies to generate website mockups and project manifests?▼

Yes, you need google-genai, pillow, and python-dotenv installed to generate website mockups and project manifests. These dependencies support the underlying image processing, environment configuration, and AI generation workflows.

How do I handle multi-section design workflows and export assets for frontend integration?▼

You handle multi-section design workflows by processing iterative refinements across different website sections. The Skill exports design assets and structured project manifests, ensuring seamless integration with downstream frontend development tasks.

Related Skills

Explore More Design & Creative Skills→
Celia-12Celia-12

design-exploration

Generate structured design briefs for UI/UX component variations.

Community
Advanced
Azeem-2Azeem-2

frontend-design

Create production-ready frontend interfaces with HTML/CSS/JS or framework components.

Community
Advanced
pacphipacphi
14

ComfyUI

Control ComfyUI workflows for image and video generation via HTTP/WebSocket.

Community
Advanced
joeylife94joeylife94

plan-design-review

Review design plans and generate visual UI/UX mockups.

Community
Advanced