diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json new file mode 100644 index 0000000..345d8bb --- /dev/null +++ b/.claude-plugin/marketplace.json @@ -0,0 +1,31 @@ +{ + "$schema": "https://json.schemastore.org/claude-code-marketplace.json", + "name": "taste-skill", + "description": "Portable anti-slop frontend and image-generation skills for Claude Code.", + "owner": { + "name": "Leonxlnx", + "email": "hello@tasteskill.dev" + }, + "plugins": [ + { + "name": "taste-skill", + "displayName": "Taste Skill", + "description": "Anti-slop frontend and image-generation skills for premium UI design, redesigns, brand kits, and image-to-code workflows.", + "source": "./", + "author": { + "name": "Leonxlnx" + }, + "homepage": "https://tasteskill.dev", + "repository": "https://github.com/Leonxlnx/taste-skill", + "license": "MIT", + "keywords": [ + "frontend", + "design", + "skills", + "brandkit", + "image-generation" + ], + "category": "development" + } + ] +} diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..2449283 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json", + "name": "taste-skill", + "displayName": "Taste Skill", + "description": "Portable anti-slop frontend and image-generation skills for Claude Code.", + "author": { + "name": "Leonxlnx" + }, + "homepage": "https://tasteskill.dev", + "repository": "https://github.com/Leonxlnx/taste-skill", + "license": "MIT", + "keywords": [ + "frontend", + "design", + "skills", + "brandkit", + "image-generation" + ] +} diff --git a/README.md b/README.md index e53d877..43d621b 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,17 @@ npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-fro You can also copy any `SKILL.md` into your project or paste it into ChatGPT / Codex conversations. +### Claude Code plugin marketplace + +Claude Code can install Taste Skill as a marketplace-backed plugin: + +```text +/plugin marketplace add Leonxlnx/taste-skill +/plugin install taste-skill@taste-skill +``` + +This keeps the existing `skills/` layout unchanged while making the skills discoverable through Claude Code's `/plugin` UI. + ### Updating from the previous version The default `taste-skill` (install name `design-taste-frontend`) is now **v2 (experimental)**, a substantial rewrite of the original v1. If you already have v1 installed, just re-run the install command and you will be upgraded: @@ -90,6 +101,7 @@ The `Install name` column is the exact value you pass to `--skill`. | **gpt-tasteskill** | `gpt-taste` | Stricter variant for GPT/Codex: higher layout variance, stronger GSAP direction, aggressive anti-slop. | | **image-to-code-skill** | `image-to-code` | Image-first pipeline: generate site references, analyze them, then implement the frontend to match. | | **redesign-skill** | `redesign-existing-projects` | Existing projects: audit the UI first, then fix layout, spacing, hierarchy, styling. | +| **redesign-imagegen-codex** | `redesign-imagegen-codex` | Screenshot-first redesign workflow for Codex: capture the current UI, generate redesigned references, then implement targeted upgrades. | | **soft-skill** | `high-end-visual-design` | Polished, calm, expensive UI with softer contrast, whitespace, premium fonts, spring motion. | | **output-skill** | `full-output-enforcement` | When the model ships half-finished work: full output, no placeholder comments. | | **minimalist-skill** | `minimalist-ui` | Editorial product UI (Notion/Linear vibes), restrained palette, crisp structure. | @@ -104,7 +116,7 @@ These produce design images only (no code). Use with ChatGPT Images, Codex image | --- | --- | --- | | **imagegen-frontend-web** | `imagegen-frontend-web` | Website comps: hero, landing, multi-section with strong typography, spacing, anti-slop art direction. | | **imagegen-frontend-mobile** | `imagegen-frontend-mobile` | Mobile screens and flows: iOS/Android/cross-platform, mockups, readable type, coherent sets. | -| **brandkit** | `brandkit` | Brand-kit boards: logo directions, palettes, type, identity applications across categories. | +| **brandkit** | `brandkit` | Brand-kit boards for new or existing brands: logo directions, palettes, type, identity applications across categories. | ### Which one should I use? @@ -113,6 +125,7 @@ These produce design images only (no code). Use with ChatGPT Images, Codex image - Use **gpt-taste** when you want the stricter GPT/Codex-oriented rules and motion/layout enforcement. - Use **image-to-code-skill** for image → analyze → code website workflows. - Use **redesign-skill** to improve an existing codebase instead of greenfield styling. +- Use **redesign-imagegen-codex** when Codex can open the current UI and should redesign from screenshots before touching code. - Add **soft-skill**, **minimalist-skill**, or **brutalist-skill** when the visual direction is already chosen. - Add **output-skill** if the agent keeps truncating output. - Use **imagegen-frontend-web**, **imagegen-frontend-mobile**, or **brandkit** when the deliverable is **images** (comps, flows, identity boards), then pass results to your coding agent. diff --git a/skill.sh b/skill.sh index 7f19ae7..71771fd 100644 --- a/skill.sh +++ b/skill.sh @@ -10,6 +10,7 @@ declare -A SKILLS=( [imagegen-frontend-mobile]="skills/imagegen-frontend-mobile/SKILL.md" [brandkit]="skills/brandkit/SKILL.md" [redesign-skill]="skills/redesign-skill/SKILL.md" + [redesign-imagegen-codex]="skills/redesign-imagegen-codex/SKILL.md" [soft-skill]="skills/soft-skill/SKILL.md" [output-skill]="skills/output-skill/SKILL.md" [minimalist-skill]="skills/minimalist-skill/SKILL.md" diff --git a/skills/brandkit/SKILL.md b/skills/brandkit/SKILL.md index d76399f..78b5aec 100644 --- a/skills/brandkit/SKILL.md +++ b/skills/brandkit/SKILL.md @@ -94,6 +94,52 @@ If the user gives references, match their quality and rhythm, not their exact co --- +# BRAND ASSET INTAKE + +Before generating, determine whether this is a net-new brand or an existing brand system. Do not assume the user wants a full invention from zero. + +If the prompt does not clearly say whether brand assets already exist, ask one short intake question before generating: + +> Before I create the brand kit, do you already have existing brand assets such as a logo, color palette, typography, product UI, photography, or visual references? If yes, I will build around them. If not, I will create the brand kit from scratch. + +Do not ask a long questionnaire unless the user requests brand strategy help. One question is enough to choose the workflow. + +## Brand Kit Modes + +Use one of these modes: + +1. **Create from scratch** + - Use when the user has no logo, colors, typography, or brand direction. + - Generate the complete identity system: logo concept, palette, type direction, applications, imagery, and system details. + - You may invent the logo mark, symbolic metaphor, palette, and visual world. + +2. **Build on existing brand** + - Use when the user provides a logo, colors, typography, product screenshots, brand deck, website, or clear visual references. + - Preserve recognizable brand equity. Do not replace the logo, rename the brand, or discard existing colors without explicit permission. + - Turn the existing assets into a more complete brand system: usage rules, applications, palette refinement, typography hierarchy, mockups, image direction, and detail language. + - If an existing asset is weak, improve its presentation and surrounding system first. Only propose a redesigned alternative if the user explicitly asks for a refresh. + +3. **Extend partial inputs** + - Use when the user provides only some ingredients, such as a name and palette, a logo without type, or a mood reference without assets. + - Lock the provided inputs, then fill only the missing parts. + - Make clear internally which elements are inherited and which elements are newly generated. + +## Intake Signals To Preserve + +When assets exist, identify and preserve: + +- brand name spelling and casing +- existing logo or wordmark structure +- primary colors and any forbidden colors +- typography or font references +- product category and audience +- visual references, mood, or competitive set +- required applications, such as app icon, website, packaging, deck, social, or stationery + +Existing assets are source material, not decoration. The generated board should make them feel more systematic, premium, and usable. + +--- + # BRAND STRATEGY FIRST Before generating, infer the brand strategy. @@ -740,11 +786,14 @@ Use this structure internally: Create a premium brand-kit overview image for "[BRAND NAME]". Brand strategy: +- mode: [create from scratch / build on existing brand / extend partial inputs] - category: [category] - audience: [audience] - personality: [traits] - core metaphor: [metaphor] - logo idea: [how the mark combines symbol + name + category meaning] +- provided assets to preserve: [logo / colors / typography / references / none] +- missing system pieces to create: [palette / type / applications / image direction / details] Layout: [3×3 / 2×3 / custom] grid on a dark or light presentation canvas with strong gutters, clean alignment, and refined negative space. @@ -775,6 +824,8 @@ readable, minimal, high hierarchy, no tiny fake text. Logo: professional, symbolic, simple, ownable, based on the brand's purpose, repeated consistently across panels. +If mode is "build on existing brand", preserve the supplied logo and recognizable brand assets. Do not invent a replacement identity unless the user explicitly asks for a refresh. + --- # FINAL OUTPUT STANDARD diff --git a/skills/llms.txt b/skills/llms.txt index 74a7527..0d49959 100644 --- a/skills/llms.txt +++ b/skills/llms.txt @@ -6,6 +6,7 @@ imagegen-frontend-web: Image-generation-only skill for creating premium website imagegen-frontend-mobile: Image-generation-only skill for creating premium mobile app screen concepts and flows. Does not write code. brandkit: Image-generation-only skill for creating premium brand-kit overview images with logo concepts, identity systems, color palettes, typography, and mockups. Does not write code. redesign-skill: For upgrading existing projects by auditing and fixing design problems. +redesign-imagegen-codex: Screenshot-first redesign workflow for Codex. Capture the live UI with Chrome DevTools MCP or another browser tool, audit screenshots, generate redesigned references, then implement targeted changes. soft-skill: Focuses on an expensive, soft UI look with premium fonts, whitespace, depth, and smooth animations. output-skill: Prevents AI from being lazy, skipping code blocks, or using placeholder comments. minimalist-skill: Enforces clean, editorial-style interfaces (Notion/Linear style) with strict monochrome palettes. diff --git a/skills/redesign-imagegen-codex/SKILL.md b/skills/redesign-imagegen-codex/SKILL.md new file mode 100644 index 0000000..ad43d7e --- /dev/null +++ b/skills/redesign-imagegen-codex/SKILL.md @@ -0,0 +1,71 @@ +--- +name: redesign-imagegen-codex +description: Screenshot-first redesign workflow for Codex. Use when improving an existing web UI with browser access: capture the live page with Chrome DevTools MCP or another browser tool, audit the screenshots, generate redesigned visual references, then implement targeted code changes against the existing project. +--- + +# Redesign Imagegen Codex + +Use this skill for existing websites or apps where visual quality matters and Codex can inspect the running UI in a browser. + +The workflow is screenshot-first: + +1. **Run the project** + - Read the repo first. + - Identify the framework, package manager, and dev command. + - Start the local app or use the user's provided URL. + - Do not redesign from code alone when the UI can be opened. + +2. **Capture the current UI** + - Prefer Chrome DevTools MCP when available. + - Otherwise use Playwright, browser screenshots, or the available screenshot tool. + - Capture desktop and mobile viewports. + - Capture key states: hero/top screen, major sections, navigation, forms, empty/error/loading states when reachable. + - Save screenshots as artifacts so the redesign has a concrete baseline. + +3. **Audit before imagining** + - Inspect the screenshots before generating new visuals. + - Identify what must be preserved: content, IA, conversion goals, brand assets, product constraints, accessibility needs. + - Identify visual debt: weak hierarchy, generic AI patterns, spacing issues, color/contrast problems, awkward responsive behavior, missing interaction states. + - State whether this is a preserve-and-polish redesign or a full visual overhaul. + +4. **Generate redesigned references** + - Generate new reference images from the captured UI and audit. + - Use one clear image per important section or state. + - Keep references implementation-friendly: readable typography, visible spacing, clear component boundaries, realistic responsive behavior. + - Do not generate an unrelated fantasy concept. The new references must answer the existing product's actual page structure. + +5. **Analyze the generated references** + - Extract layout, spacing, typography, color, surface treatment, motion, and component rules. + - Decide what can be implemented safely with the current stack. + - Avoid migrations, new design systems, or extra dependencies unless the existing project already supports them or the user explicitly asks. + +6. **Implement targeted changes** + - Work with the existing framework and styling system. + - Preserve behavior, routes, forms, data loading, and accessibility semantics. + - Make scoped visual upgrades instead of rebuilding the app from scratch. + - If generated imagery is needed but unavailable at implementation time, create clear asset slots and document the required image dimensions. + +7. **Verify in-browser** + - Reopen the modified page. + - Capture after screenshots for the same viewports and states. + - Check layout, text fit, contrast, focus states, hover/pressed states, and mobile overflow. + - Run the closest available tests or build command. + +## Rules + +- Do not skip the screenshot baseline. +- Do not rely on screenshots only from one viewport. +- Do not overwrite existing brand identity unless the user asks for a full rebrand. +- Do not replace working product UI with static mockups. +- Do not invent fake data where the existing app already provides real data. +- Do not use image generation as decoration; use it to create buildable design direction. + +## Output Contract + +When reporting back, include: + +- baseline screenshots captured +- redesign references generated +- files changed +- verification commands run +- any visual risks or assets still needed