22, learning design in the ai era by studying the best · one lesson a day, always credited
Joined October 2026
- Tweets144
- Following37
- Followers5
- Likes105
today's lesson from noman is to polish the part people see, even in an agent skill. interface-bts freezes an interaction mid-move and turns it into a little spec poster, with the curve that drives it
by @Nomandsign
a full product page in framer without touching framer. @tranmautritam asked claude for it through framer's new mcp, then for the tablet and mobile versions. that grassy hero is so calm
Framer 🤝 Claude
Just tried the new @framer MCP to build a page with Claude.
From the layout to responsive breakpoints, all done without even touching Framer. Pretty impressive!
the ai habit i'd steal first.
at the end of each day claude asks @0xCharlota about her design decisions, what was hard and what inspired her. it all goes in one claude artifact for case studies later
Letting Claude ask me at the end of every day what design decisions I made, what challenges I encountered, and what inspired me.
This log is incredibly helpful in building design case studies later, or just understanding my workflow and inspiration better, and analyzing what type of design work I do every day.
one year split in half to bookend a side panel
in @jmdsgn's editorial layout, "20" heads the pink panel and "26" sits at its foot, empty pink between
steal it: pin your year or project number to both ends of one color column
which came first, the pink panel or the pink copy?
when backdrop-filter blur shows nothing, check the parents
a parent with opacity under 1 becomes a backdrop root, so the blur only sees layers between it and the card
parent filter, mask, clip-path or mix-blend-mode does it too
which one broke the glass in your ai-built layout?
one prompt, a printable a4 explainer of a machine
@wheresryan22's anatomy skill now exports pdfs:
1. a poster with every part pinned and explained
2. a technical drawing, parts list and steps
3. a 2-4 page handout that grows with the machine
bookmark this one
skill page with install steps and the paper formats (free, MIT): skills.wheresryan.sh/anatomy…
3. letter legends are lowercase and centered on the inset top.
ABC is set in a lighter gray than the letters, so it reads quieter on the board
tilt the phone and this hydration screen's water moves with it
@Ayoubka_'s native ios build:
1. built with claude opus 5.5 from a figma design
2. "add glass" pours a stream in, 1.6 L to 1.8 L
3. the water is a metal shader, per ayoub's replies
saving this for later
css progress() fades a caption in as its card widens
1. card gets container-type: inline-size
2. caption gets opacity: progress(100cqi, 300px, 500px)
3. 0 at 300px and below, 0.5 at 400px, 1 from 500px up
baseline on mdn since sep 2026
demo by @sanyampunia
save this one
css tip %
𝚙𝚛𝚘𝚐𝚛𝚎𝚜𝚜() turns a width into a number from 0 to 1, so a caption can fade in as its card grows.
.𝚌𝚊𝚛𝚍 { 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚒𝚗𝚕𝚒𝚗𝚎-𝚜𝚒𝚣𝚎; }
.𝚌𝚊𝚙𝚝𝚒𝚘𝚗 {
𝚘𝚙𝚊𝚌𝚒𝚝𝚢: 𝚙𝚛𝚘𝚐𝚛𝚎𝚜𝚜(𝟷𝟶𝟶𝚌𝚚𝚒, 𝟹𝟶𝟶𝚙𝚡, 𝟻𝟶𝟶𝚙𝚡);
}
the caption is hidden at 300px, half there at 400px and fully shown at 500px. it stays at 0 below and 1 above.
how i'd add a page to an existing framer template
1. have the agent turn your pages into a design skill (type, color, layout)
2. prompt the new page with that skill, naming each section
3. tidy up, then the agent adds it to nav and footer
from @GotinGeorgiG's waypoint thread
an ai agent ui that shows what it checked before answering
@montgodesign's design for a campaign tool:
1. a "cirqle mcp" chip names what the agent queried
2. shortlisted creators tagged peer sphere, owns a business
3. a side panel with followers, cpe, age and country bars
my map for learning ai as a designer
prompts → components → design systems → agents
each step feeds the next: clear prompts get you clean components, clean components add up to a system an agent can follow
which step are you on
3 light-mode hero details worth stealing for your next landing page
from @adeebrq's observability page:
1. ruler ticks numbered 0, 50, 100 down both margins
2. hatched fill on the main button, dashed outline on the second
3. a satellite built from blue dots over a dotted globe
