skills.rest
humanerd-drew
humanerd-drewOFFICIAL
Explore all skills by this author →
GitHub

designer

Create UI/UX mockups, SVG assets, and design documentation.

2|7|Updated Jun 19, 2026
Search Tags:#design system#UI/UX design#UI components#mockup#SVG assets
One-click install
npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill designer-humanerd-drew
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: designer
Source: https://github.com/humanerd-drew/opencode-drewgent/tree/main/skills/ui/designer
Command: npx skills add https://github.com/humanerd-drew/opencode-drewgent --skill designer-humanerd-drew

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill Unit provides a streamlined process for UI/UX design, allowing designers to create mockups, UI components, design systems, and visual assets without worrying about backend logic.

Core Features & Use Cases

  • Design Mockups: Generate quick HTML mockups with variations.
  • UI Components: Create production-ready Svelte/Vanilla components.
  • SVG Assets: Produce cover images, icons, and illustrations.
  • Design Docs: Compile token specifications for design systems.
  • Use Case: For a new app, use this Skill to create design mockups and component assets, ensuring consistent and accessible UI across platforms.

Quick Start

Start by searching for relevant UI patterns using Lazyweb, then create a Sketch or Component using the 'skill("sketch")' or 'skill("component")' commands.

Frequently Asked Questions about designer

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

FAQPage Schema
How do I create UI mockups and components without writing backend logic?▼

You can create UI mockups and components by generating HTML mockups with variations and production-ready Svelte or Vanilla components. This process focuses purely on visual assets and mockups for web applications without backend logic.

What's the best way to generate SVG assets and design system tokens for a web app?▼

Generating SVG assets and design system tokens is accomplished by producing cover images, icons, and illustrations, then compiling token specifications. This ensures consistent and accessible UI across platforms.

Can I use this to build a complete design system for front-end development?▼

Yes, you can build a complete design system by compiling token specifications and creating production-ready UI components. It is designed for front-end developers and designers needing rapid visual asset production.

Do I need a specific framework to use these UI components and mockups?▼

No specific framework is strictly required, as the skill generates HTML mockups alongside Svelte and Vanilla components. It utilizes baseline-ui for design conventions and Lazyweb for reference material.

How does the process work for finding UI patterns before creating a mockup?▼

Finding UI patterns works by searching for relevant references using Lazyweb, then creating a sketch or component using specific commands. This streamlines the design process from initial pattern discovery to mockup generation.

Are there limitations when generating design documentation and component variations?▼

Design documentation generation is limited to compiling token specifications for design systems. Mockups are generated as HTML with variations, and components are produced as Svelte or Vanilla code.

Related Skills

Explore More Design & Creative Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
systempromptiosystempromptio
2

frontend-coding-standards

Enforce vanilla JS, semantic HTML, and token-based CSS standards for UI components.

Official
Intermediate
hiddink-aihiddink-ai
1

design-shotgun

Generate four parallel design mockups for a specified component.

Official
Advanced
tunneleventunneleven

c4flow:design

Generate design systems and UI mockups for specified features.

Community
Basic