SiSkill Explore Skills Free Skills Pricing Installation guide

Playful Learning Design

Make learning activities feel inviting and easy to start.

For family education, workshops and learning activities. Friendly rounded type, tactile learning illustrations, numbered activity cards and large clear controls. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.

Playful Learning Design

Available now · v1.0.0

USD 9.99 · Single purchase, or get access through Pro.

What would you like to make?

Build a SPROUT LAB-style concept

I have approved product copy and want this visual direction for a new page.

An original page with your copy, design tokens, image brief and responsive starter files.

Restyle an existing page

Keep my existing routes and features, but give this one page a consistent visual identity.

A focused visual patch and scoped tokens that fit your project framework.

Review design consistency

I already have a page and want to know where it drifts from this direction.

Specific issues, file locations, asset recommendations and prioritized corrections.

SPROUT LAB · from visual direction to editable page

AI-generated design concept · not a runtime screenshot

SPROUT LAB · from visual direction to editable page
The shown concept is an AI-generated bitmap; the other gallery images are actual starter screenshots. The package includes the editable page generator, rules and original sample media.

The input

An original fictional brief for SPROUT LAB: Creative science activities for curious families.

The work

Codex image generation creates the concept and separate hero artwork. The included starter builds a real page with the same design rules. Compare the labeled gallery images.

Browse all output examples
  • AI design concept · SPROUT LAB — Created with Codex image generation for an original fictional brief. This bitmap demonstrates visual direction; compare the separate starter output before buying.
  • Actual starter output · English — Browser screenshot of the shipped local generator with its included example and generated hero asset. Editable HTML/CSS/JS, rather than a flattened screenshot.
  • Actual starter output · Chinese — The same executable starter with Chinese content. Mobile menu, anchors and FAQ are functional; product services require integration.

From your material to the finished files

  1. Lock the visual direction

    Read the design rules and choose what supports your product: Friendly rounded type, tactile learning illustrations, numbered activity cards and large clear controls. Use the generated reference to discuss the image, not to infer app behavior.

  2. Build with your real material

    Give the Agent your copy and media. It can run the included Node starter for a new page or adapt your existing components. Generate new subject imagery only when a tool is available.

  3. Inspect the actual page

    Open the result in a browser. Review desktop/mobile layout, menu, focus, anchors and FAQ. Replace fictional copy and connect real services separately before publishing.

Bring this task into your Agent

Prepare these materials

Bring your product brief, audience, approved text and primary action. For a redesign, provide the existing project. Supply licensed hero media or ask your available image tool to create it; model costs are yours.

  1. Sign in to acquire the package.
  2. Extract the entire folder into your project: .agents/skills/playful-learning-design/SKILL.md (Codex) or .claude/skills/playful-learning-design/SKILL.md (Claude Code).
  3. Open a new chat in that project, attach your materials and replace the bracketed fields in the brief below. Ask the Agent to check package instructions and dependencies first.

Use $playful-learning-design for my [product] aimed at [audience]. The goal is [main action]. Read its DESIGN.md, use my attached copy and assets, and build a responsive page. Explain the image direction, generate assets only with available tools, preserve all facts, and deliver editable HTML/CSS/JS with desktop/mobile checks. Do not publish yet.

Installation & troubleshooting guide

The first result can be revised

Keep the chosen palette and visual hierarchy. Change only the hero copy and one approved image, then recheck mobile wrapping and focus contrast.

What the package includes

  • A project-ready DESIGN.md, semantic tokens.css, composition rules and asset briefs.
  • Responsive HTML/CSS/JS with original demo media, editable JSON brief and a review checklist.

What you provide separately

  • Your own Codex or Claude Code access. The starter requires Node.js 22+ and a browser, with no npm packages.
  • New images require an available image tool and your own credits. Existing apps retain their own framework dependencies.

Before you start

Will the package produce the concept image exactly?

No. The concept communicates art direction. The real starter output is shown separately, and your Agent adapts copy, images and components to your project. Exact image-generation results vary.

Is this a repackaged Refero file?

No. The instructions, tokens, templates and examples are newly authored by SiSkill. Refero is a research reference; its source documents, code, screenshots, fonts and brand assets are not included.

AI concept images illustrate art direction; they are not runtime screenshots or a promise of identical results. The separate starter screenshots show actual package output. Includes a static prototype, not authentication, checkout, analytics or a backend. Original SiSkill product; no affiliation with Refero or reference brands. Model and image-generation costs are separate.

More to make

  • Editorial SaaS Design — For writing and knowledge products. Upright editorial serif, generous paper margins, deep green actions, asymmetric manuscript composition. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.
  • Industrial Catalog Design — For hardware, furniture and industrial products. Ruled catalogue grid, square geometry, product-first imagery and compact model annotations. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.
  • Nocturne Devtool Design — For developer tools, API products and observability. Layered navy surfaces, cyan signals, monospace event data and a readable technical hierarchy. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.
  • Colorblock Studio Design — For creative studios, portfolios and cultural projects. Poster-scale type, flat orange/violet fields, asymmetric portfolio blocks and sharp boundaries. Give your Agent a brief to create a visual system and editable responsive page, or apply the direction to an existing project.