Code · Claude Sonnet 5.5
The slides from the skill for the whole day
The slides from the skill for the whole day, following the wired day plan, with the wired cover and project visuals. Reference (Workshop.md): # Workshop - **Topic:** Building a web app with an AI coding agent (Claude Code), by describing what you want in plain words - **For:** 20 designers who have never coded, or only a little. Comfortable with design tools, new to the terminal - **By 5 pm:** Every designer will have built a small personal portfolio app that shows their own work, and shown it live to the room in a two-minute demo - **The project:** A personal portfolio app: a home page with a short intro, a grid of three to six of their own projects, a page for each project, and a contact link - **Concepts:** 1. Describing what you want clearly (prompts as design briefs). 2. Structure and content: pages, components and where your work lives. 3. Style: turning type, colour and spacing into a design system the agent follows. 4. Iterating and shipping: reviewing changes, fixing what's broken and putting it online - **Tools:** Claude Code in the terminal, a code editor (VS Code), Node.js, a free GitHub account and a free hosting account. A setup guide goes out a week before, with a reminder two days ahead - **Lightning demos:** 1. "Make it move": adding small animations and hover details, given by a guest front-end designer. 2. "When it breaks": reading an error and asking the agent to fix it, given by the lead facilitator - **Helpers:** 2 helpers for 20 people, plus the lead facilitator - **Look:** Warm paper and ink: off-white background, ink black type, one electric blue accent. Calm and crafted, with generous space and simple shapes Reference (workshop-day SKILL.md): --- name: workshop-day description: Plans a one-day, hands-on workshop from 9 to 5 that teaches a practical skill (design, code, AI tools), with a timetable, a hook to open, short talks between building, one project carried through the day, lightning demos, final presentations and an outro, plus the slides to teach it. Use for workshops, masterclasses, bootcamp and training days, and hackathon-style classes. --- # Workshop day ## Read first Workshop.md for the topic, the people, what they'll have built by 5 pm, the project, the concepts, the tools, the talks and the look; the logo, the visuals and the plan wired in. ## The shape of the day - One project carried through the whole day, from the smallest version that works to the one people show at 16:15. Three or four concepts, simple to complex; cut anything the project doesn't need. - Talk in short chunks, then do: 10 to 15 minutes of talk (never over 20), then hands-on work. Whole-room talk is under a quarter of the day. - New ideas in the morning; the afternoon, after the post-lunch dip, is for building. - A break every 60 to 90 minutes, and a light lunch. ## Timetable (these times unless Workshop.md changes them) 8:30 doors and setup help · 9:00 opening · 9:20 first win (everyone runs the starter) · 9:35 block 1 · 10:30 break · 10:45 block 2 · 12:15 scope your own version · 12:30 lunch · 13:30 recall with a partner · 13:45 two lightning demos · 14:00 build sprint 1 · 15:15 break · 15:30 ship-it talk · 15:40 build sprint 2 (freeze at 16:05) · 16:15 demos · 16:45 outro, done by 17:00. ## Day plan - The timetable as a table: time, minutes, block, what happens and who leads. - Opening: the hook (show the finished thing live in the first three minutes), a 90-second story of a real problem it solved, the promise ("by 5 pm you'll have built and shown…"), the agenda with break times, norms (sticky notes in two colours for done and stuck, the helpers by name), and a setup check before any teaching. - Each block: the concept in one line; I do (a live demo: say it, do it, recap it), we do, you do in pairs, then alone; the exercise in core, stretch and wild tiers; a checkpoint file at the end so no one is left behind. - Afternoon: a stand-up recall with a partner, two lightning demos of 5 to 7 minutes t…
Meng To@shadownessguy0097- Model
- Claude Sonnet 5.5
- Made by
- Meng To
- Shared
- Likes
- 0
Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.
