Skip to the content
FilCommunityWorkflowsDocsOpen Fil
The cover visual for the workshop in Workshop.md: a designer's desk at dawn on warm off-white paper, where ink sketches of…

Image · Nano Banana 2.1

The cover visual for the workshop in Workshop.md

The cover visual for the workshop in Workshop.md: a designer's desk at dawn on warm off-white paper, where ink sketches of a portfolio layout turn into a glowing app on a laptop, with one electric blue accent, one striking picture in its look, with calm space on the left for the title, no words. 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

Meng To@shadownessguy0097
Model
Nano Banana 2.1
Made by
Meng To
Shared
Likes
0
Open in Fil

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.

More like this

The slides from the skill for the whole day, following the wired day plan, with the wired cover and project visuals…The slides from the skill for the whole day, following the wired day plan, with the wired cover and project visuals. Reference…What everyone in Workshop.md will have built by 5 pm, shown finished: a personal portfolio web app open on a laptop on a…What everyone in Workshop.md will have built by 5 pm, shown finished: a personal portfolio web app open on a laptop on a desk, with an…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with a thick dark…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…Slide 2 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk…Slide 2 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk - **Title:** Small…Slide 4 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk…Slide 4 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk - **Title:** Small…Slide 3 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk…Slide 3 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk - **Title:** Small…Slide 5 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk…Slide 5 from Talk.md, one of the skill’s idea slides, in the look of the wired Slide 1. Reference (Talk.md): # Talk - **Title:** Small…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with a thick dark…The visual explainer for Topic.md, following the skill, with the wired cover picture. Reference (Topic.md): # Topic…The visual explainer for Topic.md, following the skill, with the wired cover picture. Reference (Topic.md): # Topic - **Question:** How…The last slide from Talk.md, the skill’s last slide, in the look of the wired Slide 1. Reference (Talk.md): # Talk…The last slide from Talk.md, the skill’s last slide, in the look of the wired Slide 1. Reference (Talk.md): # Talk - **Title:** Small…The deck from the skill: the wired slides in order, full screen, with Talk.md’s notes in presenter view. Reference…The deck from the skill: the wired slides in order, full screen, with Talk.md’s notes in presenter view. Reference (Talk.md): # Talk…