Skip to content
Apiara

Search design skills

Start here
Design & build a websitefrontend-design · Website codeRefine an existing interfaceimpeccable · UI review & refinementsReview web interface guidelinesweb-design-guidelines · Findings with file referencesCreate posters & static artworkcanvas-design · PNG / PDFDesign a presentationpptx · Editable PPTXChoose colors & typographytheme-factory · A theme applied to your workExplore generative artalgorithmic-art · Interactive p5.js artworkCreate video & motionremotion-best-practices · Remotion project & rendered videoImplement a Figma designfigma · UI code in your projectDocument a Stitch design systemdesign-md · DESIGN.mdBuild an interactive web prototypeweb-artifacts-builder · React prototype & bundled HTMLMake a Slack GIF reactionslack-gif-creator · Looping GIF
↑ ↓ Select   ↵ OpenEsc Close

Get started

Get a skill, copy a task, and start in your AI tool.

1

Choose a skill for your task

Check the output and requirements, then choose Claude Code, Codex or Cursor.

2

Get the complete skill resources

Download the ZIP and keep the complete folder. Follow the setup instructions to install it in your project. Official-source skills use the author's setup.

3

Copy the example and make it yours

Confirm the skill is loaded, paste the example, and replace the purpose, audience, content and dimensions. Open and review the result.

Codex example

Build a ceramics studio homepage

Prepare a previewable web project, workshop details and booking information. The skill detail also includes a Codex-generated website sample.

  1. Get the complete skill: Open website design & build, choose Codex and download.
  2. Extract the complete folder into .agents/skills/frontend-design/ in your project.
  3. Start a fresh Codex session for that project and confirm frontend-design appears in the skills list, or type $frontend-design. Once it is loaded, copy the task below.
Use frontend-design to build a responsive homepage for a ceramic studio in this project. Visitors should understand the workshops and book a session. Use the existing stack. Start with a visual direction based on the studio's craft, then implement it. Include keyboard focus, a mobile layout, and a clear booking action. Do not invent reviews or booking statistics.

Expected deliverable: page code in your project. Run the project, open mobile and desktop previews, and check content, layout and the booking action.

Before you call it done

  • Does the result reflect your actual brief?
  • Do dimensions and format fit? Do files and interactions work?
  • Are content, imagery, and brand details accurate?
Choose a design skill
Getting started with design skills — Apiara