agentleFS
Sign inStart free
adrianoanthonymma16-boopadrianoanthonymma16-boop/opencode-agents/skills/design/SKILL.md

design

Skill1 starsChanged 57 days agoMITView on GitHub

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

  • Reads credentials
  • Installs packages

202 other projects use a version of this, 11 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use infra-audit, infra and 5 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • mayankjain1815-commitsSkill

    infra-audit

    Reads docker-compose, env files, ORM configs, and connection strings to map current infrastructure. Flags missing layers (cache, queue, analytics) based on observed access patterns. Outputs a structured infrastructure manifest.

    Also in 3 projects that use this

  • henrikthome-archSkill

    infra

    Manage all infrastructure for the Volos school project — Render (API backend), Cloudflare (DNS + Pages frontend), PostgreSQL database, and GitHub Actions workflows.

    Also in 3 projects that use this

  • Daeguk-SunSkill

    acceptance

    story 또는 epic 구현 완료 후 제품 단위 검수를 수행하는 MVP skill. 사용자가 "/acceptance story", "/acceptance epic", "story 검수", "epic 검수", "AC 기준으로 완료됐는지 봐줘" 등을 말할 때 사용한다. full E2E 검증은 MVP 범위 밖이지만, 핵심 AC가 mock-only green이나 대상 사용자에게 부적합한 입력/진행 동선으로만 닫히는 것은 gap으로 분리한다. direct `/impl` 단발 작업에 자동 강제하지 않는다.

    Also in 3 projects that use this

  • austintgriffithSkill

    standards

    Use when a design needs agent identity or reputation, pay-per-call HTTP payments, USDC transfers from a wallet that holds no ETH, or contract abilities on an address the user already owns, and when someone is about to rebuild one of these by hand. Names the deployed standard for each (ERC-8004, x402, EIP-3009, EIP-7702). Not for who may sign or custody the funds (`/wallets`) or what to install (`/tools`).

    Also in 3 projects that use this

  • mrgoonieSkill

    repomix

    Package entire code repositories into single AI-friendly files using Repomix. Capabilities include pack codebases with customizable include/exclude patterns, generate multiple output formats (XML, Markdown, plain text), preserve file structure and context, optimize for AI consumption with token counting, filter by file types and directories, add custom headers and summaries. Use when packaging codebases for AI analysis, creating repository snapshots for LLM context, analyzing third-party libraries, preparing for security audits, generating documentation context, or evaluating unfamiliar codebases.

    Also in 4 projects that use this

  • andrewclark88Skill

    expand

    Expand a project's scope by updating its foundation documents. Reads existing north-star.md (or north-star-<project>.md), architecture.md, and roadmap.md, understands the codebase state, then interviews the user about the expansion. Updates foundation docs and roadmap so design can consume them in the next phase. Use when adding a major capability, new subsystem, or architectural shift — not for small one-offs (use feature for those).

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

4 rules. 0 are common, 3 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 153 edited versions we read keep these.

  • 3

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    IMPORTANT: When scripts fail, try to fix them directly.

    line 67
  2. Very specific:

    After generation, ALWAYS ask user about HTML preview via AskUserQuestion.

    line 69
  3. Distinctive:

    Tip: If no logo exists, use Logo Design section above first.

    line 114
  4. Distinctive:

    Check if Python is installed:

    line 296

“Common” is measured: kept by at least 6 in 10 of the 153 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Design

Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.

When to Use

  • Brand identity, voice, assets
  • Design system tokens and specs
  • UI styling with shadcn/ui + Tailwind
  • Logo design and AI generation
  • Corporate identity program (CIP) deliverables
  • Presentations and pitch decks
  • Banner design for social media, ads, web, print
  • Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok

Sub-skill Routing

TaskSub-skillDetails
Brand identity, voice, assetsbrandExternal skill
Tokens, specs, CSS varsdesign-systemExternal skill
shadcn/ui, Tailwind, codeui-stylingExternal skill
Logo creation, AI generationLogo (built-in)references/logo-design.md
CIP mockups, deliverablesCIP (built-in)references/cip-design.md
Presentations, pitch decksSlides (built-in)references/slides.md
Banners, covers, headersBanner (built-in)references/banner-sizes-and-styles.md
Social media images/photosSocial Photos (built-in)references/social-photos-design.md
SVG icons, icon setsIcon (built-in)references/icon-design.md

Logo Design (Built-in)

55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.

Logo: Generate Design Brief

python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

ALWAYS generate output logo images with white background.

python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage

IMPORTANT: When scripts fail, try to fix them directly.

After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.

CIP Design (Built-in)

50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).

CIP: Generate Brief

python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt

Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)

CIP: Render HTML Presentation

python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output

Tip: If no logo exists, use Logo Design section above first.

Slides (Built-in)

Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.

Load references/slides-create.md for the creation workflow.

Slides: Knowledge Base

TopicFile
Creation Guidereferences/slides-create.md
Layout Patternsreferences/slides-layout-patterns.md
HTML Templatereferences/slides-html-template.md
Copywritingreferences/slides-copywriting-formulas.md
Strategiesreferences/slides-strategies.md

Banner Design (Built-in)

22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.

Load references/banner-sizes-and-styles.md for complete sizes and styles reference.

Banner: Workflow

  1. Gather requirements via AskUserQuestion — purpose, platform, content, brand, style, quantity
  2. Research — Activate ui-ux-pro-max, browse Pinterest for references
  3. Design — Create HTML/CSS banner with frontend-design, generate visuals with ai-artist/ai-multimodal
  4. Export — Screenshot to PNG at exact dimensions via chrome-devtools
  5. Present — Show all options side-by-side, iterate on feedback

Banner: Quick Size Reference

PlatformTypeSize (px)
FacebookCover820 x 312
Twitter/XHeader1500 x 500
LinkedInPersonal1584 x 396
YouTubeChannel art2560 x 1440
InstagramStory1080 x 1920
InstagramPost1080 x 1080
Google AdsMed Rectangle300 x 250
WebsiteHero1920 x 600-1080

Banner: Top Art Styles

StyleBest For
MinimalistSaaS, tech
Bold TypographyAnnouncements
GradientModern brands
Photo-BasedLifestyle, e-com
GeometricTech, fintech
GlassmorphismSaaS, apps
Neon/CyberpunkGaming, events

Banner: Design Rules

  • Safe zones: critical content in central 70-80%
  • One CTA per banner, bottom-right, min 44px height
  • Max 2 fonts, min 16px body, ≥32px headline
  • Text under 20% for ads (Meta penalizes)
  • Print: 300 DPI, CMYK, 3-5mm bleed

Icon Design (Built-in)

15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.

Icon: Generate Single Icon

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone

Icon: Generate Batch Variations

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons

Icon: Multi-size Export

python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons

Icon: Top Styles

StyleBest For
outlinedUI interfaces, web apps
filledMobile apps, nav bars
duotoneMarketing, landing pages
roundedFriendly apps, health
sharpTech, fintech, enterprise
flatMaterial design, Google-style
gradientModern brands, SaaS

Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.

Social Photos (Built-in)

Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.

Load references/social-photos-design.md for sizes, templates, best practices.

Social Photos: Workflow

  1. Orchestrate — project-management skill for TODO tasks; parallel subagents for independent work
  2. Analyze — Parse prompt: subject, platforms, style, brand context, content elements
  3. Ideate — 3-5 concepts, present via AskUserQuestion
  4. Design — /ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size
  5. Export — chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)
  6. Verify — Use Chrome MCP or chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export
  7. Report — Summary to plans/reports/ with design decisions
  8. Organize — Invoke assets-organizing skill to sort output files and reports

Social Photos: Key Sizes

PlatformSize (px)PlatformSize (px)
IG Post1080×1080FB Post1200×630
IG Story1080×1920X Post1200×675
IG Carousel1080×1350LinkedIn1200×627
YT Thumb1280×720Pinterest1000×1500

Workflows

Complete Brand Package

  1. Logo → scripts/logo/generate.py → Generate logo variants
  2. CIP → scripts/cip/generate.py --logo ... → Create deliverable mockups
  3. Presentation → Load references/slides-create.md → Build pitch deck

New Design System

  1. Brand (brand skill) → Define colors, typography, voice
  2. Tokens (design-system skill) → Create semantic token layers
  3. Implement (ui-styling skill) → Configure Tailwind, shadcn/ui

References

TopicFile
Design Routingreferences/design-routing.md
Logo Design Guidereferences/logo-design.md
Logo Stylesreferences/logo-style-guide.md
Logo Colorsreferences/logo-color-psychology.md
Logo Promptsreferences/logo-prompt-engineering.md
CIP Design Guidereferences/cip-design.md
CIP Deliverablesreferences/cip-deliverable-guide.md
CIP Stylesreferences/cip-style-guide.md
CIP Promptsreferences/cip-prompt-engineering.md
Slides Createreferences/slides-create.md
Slides Layoutsreferences/slides-layout-patterns.md
Slides Templatereferences/slides-html-template.md
Slides Copyreferences/slides-copywriting-formulas.md
Slides Strategyreferences/slides-strategies.md
Banner Sizes & Stylesreferences/banner-sizes-and-styles.md
Social Photos Guidereferences/social-photos-design.md
Icon Design Guidereferences/icon-design.md

Scripts

ScriptPurpose
scripts/logo/search.pySearch logo styles, colors, industries
scripts/logo/generate.pyGenerate logos with Gemini AI
scripts/logo/core.pyBM25 search engine for logo data
scripts/cip/search.pySearch CIP deliverables, styles, industries
scripts/cip/generate.pyGenerate CIP mockups with Gemini
scripts/cip/render-html.pyRender HTML presentation from CIP mockups
scripts/cip/core.pyBM25 search engine for CIP data
scripts/icon/generate.pyGenerate SVG icons with Gemini 3.1 Pro

Prerequisites

Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/logo/search.py instead of python3 scripts/logo/search.py).

Check if Python is installed:

python3 --version || python --version

Setup

export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
pip install google-genai pillow

Note for Windows: Use python instead of pip where needed (e.g., python -m pip install ...).

Integration

External sub-skills: brand, design-system, ui-styling Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free