Little Places · 建筑小集
English · 中文
Small places. Everyday stories. — a building collection by zili design.
Ten little shops and stations, each a real Three.js model you can turn all the way round, look inside and play with: open the doors, post a letter, start a wash, light the pizza oven, catch the tram. They are drawn as if by one illustrator — flat toon colour, dark ink outlines, a warm limited palette, white paving and a soft blue afternoon shadow — and shown together on one page.
The ten places
| Place | | Things to try | Link |
|---|
| 01 | Sakura Café | 桜カフェ | open the door, read the café menu | /#cafe |
| 02 | Yamada Grocery | 山田雑貨店 | roll up the shutter, four capsule machines | /#grocery |
| 03 | Bonjour Bakery | 焼きたてパン | open the door, hide the pastries, take your bread, see-through | /#bakery |
| 04 | Hanaya Flowers | 花屋 | open the door and the glasshouse vent, pick a bouquet, see-through | /#flowers |
| 05 | Sakura Sweets | 桜スイーツ | open the door, read the dessert menu | /#sweets |
| 06 | The Little Bookshop | 本屋 | open the double door, switch the lights, open the book on the reading roof, see-through | /#books |
| 07 | Pizza Piccola | ピッツェリア | open the door, fire up or rest the oven (chimney smoke), open the pizza box, see-through | /#pizza |
| 08 | Bubble Laundry | コインランドリー | open the door, start a wash, open the machine door, buy detergent | /#laundry |
| 09 | Little Post Office | 郵便局 | open the double door, send a letter, deliver a parcel, see the hall glow at night | /#post |
| 10 | Sakura Tram Station | さくら町駅 | pause the tram, open its doors (it stops at the platform), buy a ticket | /#tram |
Every place also has five colour schemes, Night mode, labels and a turntable.
On the page
- The collection — the ten places on a slow tour. Drag any one to turn them all together; rest the pointer on a place to pause the tour and bring it a little closer; click it to look closer. The wheel always scrolls the page — zoom with the − / + buttons. Colours, Night, Labels, Turntable and the Default / Front / Side views work across the whole collection or on one place (
/#cafe … /#tram).
- A closer look (below the collection,
/#explore/<id>) — one place at a time in a large display case: its own interactions, a Details list that turns the camera to each detail, See-through, Night, Turntable, Fullscreen and paging. Notes in web/EXPLORER.md.
- Get the skill (
/skill.html) — how to install the Claude skill behind the series, with four places turning by themselves.
The skill
little-places-building is a Claude skill that holds the series' house rules: human-scale proportions, palette and roof contrast, ink lines on hard edges and round shapes, the white paving with one of three street edges, the projected shadow, striped awnings, the chalkboard A-frame, moving parts, interactions, the performance budget and the pitfalls the earlier buildings ran into.
It works on its own. It ships a small kit — the shared helpers and rendering pipeline, a one-building viewer, a generic Playwright check and the Little Post Office as a reference — so you can ask for a new place in an empty folder:
mkdir -p ~/.claude/skills && curl -fsSL https://raw.githubusercontent.com/StarSharkk/little-places/main/skill/little-places-building.skill -o /tmp/little-places.skill && unzip -oq /tmp/little-places.skill -d ~/.claude/skills
Then ask Claude Code something like "Make a little ramen stall in the Little Places style." On Claude.ai, upload skill/little-places-building.skill under Skills in settings.
Inside this repository Claude uses the repo's own files and adds new places to the collection page. The source is in .claude/skills/little-places-building/; sh skill/build.sh refreshes the kit from the repo and repackages it (and the copy the site offers for download).
Run it
Requires Node.js 20.19+ or 22.12+.
cd web
npm ci
npm run dev # http://127.0.0.1:5176/
npm run build # static site in web/dist (index.html and skill.html)
npm run preview # http://127.0.0.1:4176/
Keep web/ and buildings/ side by side: the page imports the building modules through Vite aliases.
Checks
Browser checks use Playwright with Chrome. Start the dev server first, then from web/:
| Command | Covers |
|---|
npm run check | the collection page: views, colours, labels, night, mobile |
npm run check:<place> | one place: bakery, flowers, sweets, books, pizza, laundry, post, tram |
npm run check:navigation | tabs, gallery paging, deep links |
npm run check:rotation | places never overlap at any camera angle |
npm run check:explorer, check:explorer-layout | the closer-look display, its interactions and its fit on screen |
Screenshots and JSON reports are written to web/screenshots/.
Repository
| Path | Contents |
|---|
web/ | The page: collection, explorer, Get the skill, styles and Playwright checks |
buildings/01-sakura-cafe/ … buildings/10-sakura-tram-station/ | One folder per place; each model builds its own scene graph and leaves the renderer, camera and lights to the page |
buildings/02-yamada-grocery/src/optimize.js | The shared rendering pipeline: batching, ink lines and the illustrated shadow |
buildings/shared/ | Primitives, ink hull, street edges, props, motion and steam shared by the newer places |
.claude/skills/little-places-building/ | The skill source, including its standalone kit |
skill/ | The packaged skill and the script that builds it |
Credits
Designed by zili design. The page layout takes after April Zhu's Colorfigures, with its own Little Places identity. Built with Three.js, Vite and Playwright.
