Sketch to shipped.
Fixed scope, short loops, a Loom update every week, and files your engineers can use.
How a project runs
Clear steps, a fixed quote and something to see every week.
-
Day 1
A short call
You tell us what you’re building and what’s not working. We tell you honestly if we’re the right fit.
You get
- An honest answer on fit
- The right first step
-
Week 1 to 2
UX Audit and Plan
One to two weeks. You get a scope, a fix list or a product plan, and a fixed quote.
You get
- A scope or product plan
- A fix list in order
- A fixed quote
-
Every week
Design and build
We work in weekly cycles. Every week you get a Loom of what changed, with Figma and code open to you the whole time.
You get
- A Loom every week
- Figma and code open to you
-
Launch and after
Launch and keep going
We help you launch, fix what comes up in the first 30 days and stay on monthly if you want us to.
You get
- Help with launch
- 30 days of fixes
- Monthly help if you want it
The weekly rhythm
Short loops and clear review points keep late changes small.
-
Weekly Loom update
A short video: what is done, what is next and what we need.
-
Chat for daily questions
A shared Slack channel, or WhatsApp or Telegram if you prefer, for quick questions.
Friday is our day off
Messages sent on Friday (Dhaka time) wait until Saturday.
- Mon Chatopen
- Tue Chatopen
- Wed Chatopen
- Thu Chatopen Loom update
- Fri Day off
- Sat Chatopen
- Sun Chatopen
Across the project
You approve the flows first, then the screens, then the prototype.
- Kickoff callWe agree goals, scope and who decides what.
- Flows approvedHow people move through the product
- Screens approvedEvery screen, with its states
- Prototype approvedClickable, ready for handoff
One person who gives feedback keeps the work moving.
What your engineers receive
We organize the files for them and answer their questions. The specs are plain Markdown and JSON, so a coding agent such as Claude can read the same files your engineers do. We can also build the front end ourselves.
specs/README.md
# Handoff: example product
Read this first. Written for your engineers
and for coding agents such as Claude.
## What is in this folder
- design/ Figma file, by flow
- specs/screens/ One file per screen
- components.md Every component and its states
- tokens.json Colors, type sizes, spacing
- responsive.md Desktop to mobile rules
- acceptance.md What done means per screen
## Working with a coding agent
Give it this folder. Build one screen at a time
and check it against acceptance.md.
design / Figma file
- An organized Figma file Pages grouped by flow, with clear names.
- A component library Buttons, inputs, cards and more, with every state.
- Design tokens Colors, type sizes and spacing, named once so they map to code.
- States for every screen Empty, loading, error and success are designed.
specs/screens/sign-up.md
# Screen: Sign up
Flow: Onboarding, step 1 of 3
Figma: design / Onboarding / Sign up
## Components
- Input (email, password)
- Button / primary, loading state
- Link / text
## States
- Empty: fields blank, button disabled
- Loading: button shows spinner
- Error: message under the field
- Success: go to step 2
## Mobile (767px and below)
- One column, button full width
specs/components.md
# Components
## Button
Variants: primary, ghost
States: default, hover, focus, disabled, loading
Tokens: color.brand, radius.pill, space.4
## Input
States: empty, filled, focus, error, disabled
Error text sits under the field, never in it.
## Card
States: default, hover, selected, empty
specs/tokens.json
{
"color": {
"brand": "#5d32e1",
"ink": "#0e0c17",
"line": "#e8e5ef"
},
"font-size": {
"body": "16px",
"h1": "48px"
},
"space": { "2": "8px", "4": "16px", "6": "32px" },
"radius": { "md": "12px", "pill": "999px" }
}
specs/responsive.md
# Responsive rules
## Breakpoints
- Desktop: 1024px and up
- Tablet: 768px to 1023px
- Mobile: 767px and below
## Dashboard
- Desktop: sidebar + 3 column cards
- Tablet: sidebar collapses to icons
- Mobile: bottom tabs, cards stack
specs/acceptance.md
# Acceptance: Sign up
- [ ] Matches Figma at 1440px and 390px
- [ ] Uses tokens.json, no new colors
- [ ] Empty, loading, error, success states
- [ ] Error text under the field
- [ ] Button full width at 767px and below
- [ ] Keyboard: tab order follows the layout
Walkthrough call
A call to take your engineers through the file.
For your engineers
- An organized Figma file. Pages grouped by flow, with clear names.
- A component library. Buttons, inputs, cards and more, with every state.
- Design tokens. Colors, type sizes and spacing, named once so they map to code.
- States for every screen. Empty, loading, error and success are designed.
- Responsive rules. Notes on how each layout changes from desktop to mobile.
- A handoff walkthrough. A call to take your engineers through the file.
For a coding agent
- A README to start from. What is in the package and the order to build in.
- One Markdown file per screen. Flow, components used and every state.
- Tokens as JSON. Colors, type sizes and spacing with the same names as in Figma.
- Acceptance criteria. A checklist per screen, so the agent and your team know when it is done.
Questions about how we work
How do we start?
Book a 20-minute call, or send us a page for a free design review. If we agree on scope, we aim to start within 5 business days.
What do you need from us?
A short brief, access to your product or prototype, and one person who can give feedback.
Who will I talk to?
Senior people, directly. The studio is led by MD Rakib Shekh, with no account managers in between.
How do you handle feedback?
At fixed review points: the flows, then the screens, then the prototype. That keeps late changes small.
Can you work with our engineers?
Yes. We organize the files for them and answer their questions. We can also build the front end ourselves.
Start with a 20-minute call
We aim to start within 5 business days once we agree on scope.