mcpField
D
design-playful-app-icons

design-playful-app-icons

github.com/chunkithwangDesign & UI17794 installsUpdated 12w ago
Repository

About design-playful-app-icons

A design skill for creating distinctive app icons from text-based rules. It guides product teams through concept selection, image prompts, critique, and production handoff, with attention to originality and small-size readability.

Key features

  1. 01Read style and evaluation references
  2. 02Develop three distinct icon concepts
  3. 03Score concepts before rendering
  4. 04Build detailed image-generation prompts
  5. 05Review and refine icon readability
  6. 06Prepare production handoff specifications

Use cases

  1. 01Develop icon directions from a product brief
  2. 02Write a reproducible image-generation prompt
  3. 03Critique an existing app icon
  4. 04Prepare icon assets for iOS or Android

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/chunkithwang/design-playful-app-icons --skill design-playful-app-icons

After installing, type/design-playful-app-iconsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
design-recipes.md
evaluation.md
style-profile.yaml

Details

From the project README

Design Playful App Icons

Create distinctive app icons from text-only design rules. Communicate one product promise through a bold object, mascot, or glyph that remains recognizable at launcher size.

Load the references

Do not request or depend on bundled reference images. Ask for an image only when the user wants an existing icon critiqued or edited.

Follow the workflow

  1. Reduce the brief to object + action + emotion.
    • Object: the simplest concrete metaphor for the product.
    • Action: the benefit or transformation users receive.
    • Emotion: the personality the icon should convey.
  2. Infer missing details from the product category when the choice is low risk. Ask one concise question only when the product metaphor would otherwise be arbitrary.
  3. Choose one visual lane from style-profile.yaml. Do not combine all lanes.
  4. Create three directions that differ in metaphor or silhouette, not merely color.
  5. Score the directions for product meaning, silhouette, and originality before rendering. Select the strongest direction and state why.
  6. Construct the final generation prompt with the selected recipe. Encode geometry, composition, palette roles, facial language, material, light, and exclusions explicitly.
  7. Generate the icon when image tools are available. Otherwise provide the final prompt and construction specification.
  8. Evaluate the result with evaluation.md at 1024, 180, 60, and 32 px. If the actual raster is unavailable, reason conservatively from the composition and detail count.
  9. Revise the weakest scoring dimension first. Limit each pass to one or two targeted changes so the identity does not drift.
  10. Deliver the final asset or prompt together with palette, lane, production notes, and a short quality report.

Preserve the core identity

  • Use one dominant subject and no more than one supporting prop.
  • Fill roughly 70-85% of the square while protecting the face and signature detail.
  • Build the silhouette from 2-5 broad rounded parts.
  • Use a face only when it strengthens the product metaphor. Prefer two eyes and one mouth or gesture.
  • Use one dominant hue, one contrast hue, and ink or soft white as neutral.
  • Use either clear flat separation or coherent soft volume. Avoid ambiguous half-rendering.
  • Add exactly one memorable hook: expressive gaze, shape pun, asymmetric crop, purposeful prop, or unusual proportion.
  • Keep the background edge-to-edge and visually quiet.

Prevent generic output

  • Make the icon explain the app's job before adding cuteness.
  • Prefer a concrete product-specific object over a generic blob, star, sparkle, or smiling face.
  • Direct pupils, eyelids, tilt, or pose to create a distinct attitude.
  • Use gradients only to describe volume, depth, or a deliberate warm-cool transition.
  • Reject concepts that could plausibly represent several unrelated apps.

Enforce originality and public-safety rules

  • Do not name, imitate, or cite an artist, studio, existing app, logo, mascot, or copyrighted character.
  • Do not use phrases such as "in the style of" or ask the model to reproduce a known icon.
  • Do not reconstruct any reference-specific silhouette, face, color arrangement, or prop combination.
  • Develop original metaphors from the user's product function and audience.
  • Avoid visible text, brand names, watermarks, and trademark-like monograms unless the user owns and supplies the mark.

Deliver the right response

Concept development

Return three directions with: name, metaphor, lane, silhouette, expression or hook, palette preset, and small-size rationale. Recommend one.

Image generation

Generate the selected direction when tools permit. Also return the exact final prompt, negative constraints, selected lane, and palette so the result is reproducible.

Critique and refinement

Lead with the highest-impact issue. Score all rubric dimensions, propose concrete edits, then supply a revised prompt or specification.

Production handoff

Specify canvas, safe area, layer order, palette values, light direction, depth treatment, mask behavior, and export requirements. For iOS, default to an opaque 1024 x 1024 sRGB raster without transparency or a baked corner mask. For Android adaptive icons, separate foreground and background and verify the current platform safe-zone template.

Build prompts in this order

  1. Artifact and target platform
  2. Product purpose and chosen metaphor
  3. Pose, crop, and silhouette
  4. Visual lane and part construction
  5. Expression and single signature hook
  6. Palette roles and quiet background
  7. Material, light, depth, and shadow
  8. 32 px readability requirements
  9. Negative constraints and originality guardrail

Never rely on adjectives alone. Replace "cute, modern, polished" with visible construction decisions.

Comments

Markdown supported