design

Design

Create visual design work, then refine it to professional quality using impeccable.style design skills.

Sub-Skills

Pre-installed (no setup needed):

rebyteai/nano-banana — AI image generation (text-to-image and image-to-image editing) via Google Gemini. Flash model for fast iteration, Pro model for 4K final output.
rebyteai/internet-search — Research design trends, brand references, competitor visuals, and inspiration.
rebyteai/rebyte-app-builder — Deploy finished designs as live web pages on rebyte.pro.

Bundled impeccable.style commands (in commands/ directory — no installation needed): All 20 design commands from impeccable.style are bundled in the commands/ subdirectory. Read the SKILL.md in each command's directory to use it. Available commands: /critique, /audit, /typeset, /arrange, /colorize, /bolder, /quieter, /distill, /animate, /polish, /adapt, /clarify, /overdrive, /delight, /harden, /normalize, /onboard, /extract, /optimize, /teach-impeccable. The commands/frontend-design/ directory contains the core design principles referenced by all commands.

Requires installation (install before use):

nextlevelbuilder/ui-ux-pro-max — Design intelligence: 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines.
anthropics/web-artifacts-builder — Build interactive visual artifacts (React + Tailwind + shadcn/ui) bundled as single HTML files.

Workflow

Step 0: Install Required Skills

Before starting, install skills that are not pre-installed in the VM:

npx skills add -y nextlevelbuilder/ui-ux-pro-max-skill
npx skills add -y anthropics/skills

Run these commands first. They only need to be run once per session. The impeccable design commands are already bundled — no installation needed.

Step 1: Understand the Design Brief

Parse what the user wants. Identify:

What — Logo, icon set, illustration, UI mockup, landing page design, brand kit, social media graphics?
Style — Minimalist, bold, playful, corporate, retro, futuristic? If unclear, suggest options using ui-ux-pro-max style database.
Colors — Specific palette, or should you recommend one? ui-ux-pro-max has 97 palettes to choose from.
References — Any brands, websites, or styles to draw inspiration from?
Output format — Image files, interactive prototype, deployed web page?

If the request is clear, proceed. If not, ask about style and color preferences.

Step 2: Research & Gather Inspiration (if needed)

Use internet-search when the user references a brand, competitor, or trend:

Look up the brand's existing visual identity
Find competitor designs for comparison
Research current design trends in the relevant space

Skip this step if the user provides clear specifications or reference images.

Step 3: Create

Choose your approach based on what's being created:

Logo / Icon / Illustration / Brand Graphics: Use nano-banana for AI image generation.

Start with the Flash model for rapid iteration — generate 3-4 variations
Show variations to the user and get feedback
Refine the best option with adjusted prompts or image-to-image editing
Generate final version with Pro model at high resolution (2K or 4K)

Prompt tips for logos:

Be specific about style: "flat vector logo", "3D metallic emblem", "hand-drawn wordmark"
Include background preference: "on white background", "transparent-style", "dark background"
Mention what to avoid: "no text", "simple shapes only", "no gradients"

UI Mockup / Web Design: Use ui-ux-pro-max for design decisions, then build with web-artifacts-builder.

Consult ui-ux-pro-max for style, palette, and typography recommendations
Build the mockup as an interactive artifact (React + Tailwind + shadcn/ui)
This produces a real, clickable prototype — not a static image

Brand Kit (logo + colors + typography + usage guidelines): Combine both approaches:

Generate the logo with nano-banana
Select color palette and font pairings from ui-ux-pro-max
Build a brand guidelines page with web-artifacts-builder
Deploy with rebyte-app-builder

Social Media Graphics / Marketing Assets: Use nano-banana with specific aspect ratios:

Instagram post: 1:1
Instagram story: 9:16
Twitter/LinkedIn header: 16:9
Facebook cover: 21:9

Step 4: Refine with Impeccable Skills

After creating the initial design, apply impeccable skills to elevate quality. Choose the skill that matches what needs improvement:

Review & Evaluate:

/audit — Score accessibility, performance, and visual hierarchy with a P0-P3 report
/critique — UX evaluation with persona-based testing and actionable feedback
/normalize — Realign drifted UI to match design system standards

Visual Refinement:

/typeset — Fix font choices, type hierarchy, sizing, and readability
/colorize — Add strategic color to monochromatic or dull designs
/bolder — Amplify bland designs with more visual impact and personality
/quieter — Tone down aggressive or overstimulating designs to feel refined

Layout & UX:

/arrange — Fix layout, spacing, visual rhythm, and hierarchy
/distill — Strip unnecessary complexity, simplify
/clarify — Improve UX copy, error messages, labels, and instructions
/onboard — Design or improve onboarding flows, empty states, first-run experiences

Motion & Delight:

/animate — Add purposeful micro-interactions, transitions, and hover effects
/delight — Add moments of joy, personality, and memorable touches
/overdrive — Push with technically ambitious effects: shaders, spring physics, scroll-driven reveals

Production Quality:

/polish — Final quality pass fixing alignment, spacing, consistency details
/harden — Error handling, i18n support, text overflow, edge case resilience
/adapt — Make responsive across mobile, tablet, desktop with proper breakpoints
/optimize — Fix performance: loading speed, rendering, animations, bundle size
/extract — Consolidate reusable components, design tokens, and patterns

Typical refinement flow:

Create the initial design (Step 3)
Run /audit or /critique to identify issues
Apply targeted skills to fix what the audit found (e.g., /typeset for typography, /arrange for layout)
Run /polish as a final pass before delivery

You can apply multiple skills in sequence. Each one builds on the previous improvements.

Step 5: Iterate

Design is iterative. After showing a version:

"Make it more minimal" → Use /distill to strip complexity, or /quieter to reduce intensity
"Try different colors" → Use /colorize or consult ui-ux-pro-max palettes
"Make it bolder" → Use /bolder to amplify impact
"Fix the typography" → Use /typeset to establish proper type hierarchy
"Add some life to it" → Use /animate for micro-interactions or /delight for personality
"Is it accessible?" → Use /audit for a scored accessibility report
"Make it responsive" → Use /adapt for cross-device layouts

Step 6: Deliver

Based on what was created:

Image assets (logos, illustrations, graphics):

Upload final images to the Artifact Store
Provide multiple formats if useful (e.g., logo on light + dark background)

Interactive mockups / prototypes:

Deploy to rebyte.pro with rebyte-app-builder
Share the live URL

Brand kits:

Deploy the brand guidelines page
Also upload individual assets to Artifact Store

Decision Points

"nano-banana or web-artifacts-builder?" — If the output is a static visual (logo, illustration, graphic), use nano-banana. If it's interactive or layout-heavy (UI mockup, prototype, dashboard design), use web-artifacts-builder. Brand kits use both.
"Flash or Pro model?" — Use Flash for iterations and exploration (fast). Switch to Pro for the final version (higher quality, 4K).
"Which impeccable skill?" — Match the skill to the problem: typography issues → /typeset, layout issues → /arrange, too bland → /bolder, too loud → /quieter, pre-launch → /polish. When unsure, start with /audit or /critique to get a scored report that tells you what to fix.
"The user wants something nano-banana can't do well" — AI image generation struggles with precise text in images and exact geometric layouts. For those, build with web-artifacts-builder (HTML/CSS gives pixel-perfect control), then refine with impeccable skills.