LinkedIn Clone

Build Synergy, an original professional-network app for iPhone in SwiftUI, in the genre of LinkedIn: a Home feed of posts with photos, "…more", six reactions on a long-press, comments, repost and send, "See translation" on foreign-language posts, My Network (invitations, Connect), Notifications ("Say congrats"), Jobs with Quick Apply, Messaging, compose with the post springing onto the feed, Search and the profile. Its own name, logo and words, all below. The user is Maya Chen. Today is Monday, November 9, 2026.

ASSETS
curl -L once each and unzip flat: https://vibecode-linkedin-media.beacon.host/synergy-brand.zip (synergy-icon.png: use it as the app icon) and https://vibecode-linkedin-media.beacon.host/media.zip (the JPEG photos named below; av-* are 400 px avatars). Put every image in the asset catalog under its file name. The Synergy logo is drawn in code: a #0A66C2 rounded square (22% corners) holding two white rings that overlap like a Venn diagram (each ring 46% of the square wide, a 6% stroke, centres 23% apart), the lens where they overlap filled white. Company logos are drawn in code too (FIXTURES). No image generation is needed.

SHELL
Opens on Home: no splash, onboarding, sign-in or permission prompts. A 5-tab bar (white, top hairline #E8E8E8, icon over a 10 pt label): Home (house.fill), My Network (person.2.fill, a red #CB112D badge "2"), Post (plus.square.fill, opens compose), Notifications (bell.fill, red badge "4"), Jobs (briefcase.fill). Unselected #666666, selected #191919. Top bar on Home, My Network, Notifications and Jobs: Maya's 32 pt avatar left (opens Profile), a 34 pt search capsule (1 pt #8C8C8C border, magnifyingglass + "I'm looking for…" in #666666) that opens Search, then square.and.pencil (compose) and ellipsis.message (Messaging) at the right. Light mode only; the status bar stays visible and dark on every screen.

SCREENS
1. Home. The feed is white post cards separated by 6 pt #F4F2EE bands, scrolling under the pinned top bar.
2. Post cell (Components/PostCell). Header (12 pt top, 16 pt sides): a 48 pt round avatar, then name (14 pt semibold #191919) + " · 2nd" (14 pt #666666), the headline (12 pt #666666, one line, truncates), "1h · " + globe.americas.fill (12 pt #666666); at the right "+ Follow" (14 pt semibold #0A66C2) for 2nd/3rd, then ellipsis and xmark (#666666). Text 14 pt #191919, line height 20, 8 pt below the header; posts longer than 5 lines (blank lines count) clamp with "…more" (#666666) at the end of line 5, so Brad's shows both opening paragraphs; a tap on "…more" expands the full text in place with a 0.35 s height spring (everything below glides down, never jumps). Media: full card width, edge to edge, 3:2, 8 pt below the text; a tap opens it full screen on black. Reactions row (12 pt #666666, 10 pt padding): up to three overlapping 16 pt reaction icons (1.5 pt white ring) then the count "2,847" at the left; "412 comments · 96 reposts" at the right. Hairline #E8E8E8 inset 16 pt. Action bar, 52 pt: Like (hand.thumbsup), Comment (text.bubble), Repost (arrow.2.squarepath), Send (paperplane), each a 20 pt icon over a 12 pt semibold label, #666666, evenly spaced. A tap on the card opens the post page.
3. Reactions (Components/ReactionButton + ReactionPicker). Six reactions, each a circle in its colour with a white SF Symbol, name in its label colour: Like (hand.thumbsup.fill, #378FE9, label #378FE9), Celebrate (hands.clap.fill, #6DAE4F, #44712E), Support (hands.and.sparkles.fill, #A872E8, #715E86), Love (heart.fill, #DF704D, #B24020), Insightful (lightbulb.fill, #F5BB5C, #915907), Funny (face.smiling.inverse, #44BFD3, #1A707E). A tap on Like toggles Like. A 0.35 s press on Like opens the picker: a white capsule (28 pt corners, shadow 0 4 16 black 18%, 8 pt padding) 8 pt above the action bar, starting at the card's left margin, holding the six 40 pt icons 6 pt apart; they pop in left to right (30 ms stagger, scale 0.3 → 1, spring). While the finger is held, the icon under it lifts 26 pt and scales to 1.45 (the others to 0.9), fully above the finger, and shows its name above it in a dark capsule (#191919 at 90%, white 12 pt semibold); moving across switches icons smoothly. Release over an icon: the picker closes over 0.15 s (icons sink 8 pt and fade, the capsule fades); once it's gone the Like button becomes that reaction (its filled icon in its colour, its name in its label colour) with a pop (1.0 → 1.25 → 1.0, 0.3 s), and the reactions row puts that icon first while the count rolls up one (the old number slides up and out, the new one slides in). A later pick swaps it with the same pop and no count change; a tap on a set reaction clears it; release outside cancels.
4. "See translation". Posts not in English show "See translation" (14 pt semibold #0A66C2) on its own line under the text. A tap: a 0.4 s "Translating…" shimmer on the link, then the original text fades out (0.15 s) and the translation types in word by word (70 ms a word) while the cell's height springs to fit (no jump); then "Translated from Spanish · Show original" (13 pt #666666, "Show original" semibold #0A66C2) replaces the link. "Show original" cross-fades back (0.2 s). Translations come from TranslationService (below).
5. Post page (push): the post in full, then "Most relevant" + chevron.down and the comments: a 32 pt avatar and a #F2F2F2 rounded rectangle (8 pt corners) with the name (13 pt semibold), headline (12 pt #666666), time, then the text; under it "Like · Reply" (12 pt #666666). A pinned "Add a comment…" bar (Maya's avatar, a capsule with a 1 pt #8C8C8C border; a "Comment" capsule #0A66C2 appears with text); sending springs the comment in at the top (0.3 s, the rows below glide down) and the comment count rolls up one.
6. Repost: a sheet with "Repost" and "Repost with your thoughts"; Repost shows the toast "Reposted". Send: a sheet with 4 connections; a tap shows "Sent".
7. Post kinds: new position (Priya): a #EAF4E5 card (8 pt corners) with code-drawn confetti dots, a briefcase.fill badge, "Starting a New Position" (13 pt #666666) over "Staff Engineer at Northwind" (17 pt semibold). Job (Sofia): a 1 pt #E8E8E8 card with the logo tile, "Senior iOS Engineer", "Lumen Labs · Remote" and a "Quick Apply" capsule.
8. My Network: tabs "Grow" | "Catch up" (15 pt semibold; selected #01754F with a sliding 2 pt underline). "Invitations (3)" + arrow.right; rows: 56 pt avatar, name (15 pt semibold), headline (13 pt #666666), "12 mutual connections" (12 pt #666666); at the right a 32 pt xmark circle (#666666 outline) and a 32 pt checkmark circle (#0A66C2 outline). Accept: the row turns into "Jordan Lee is now a connection" + a "Message" capsule (0.3 s) and the badge drops; Ignore: the row slides out, the rest glide up. Then "People you may know from Lumen Labs", a 2-column grid of cards (1 pt #E8E8E8 border, 8 pt corners, a 56 pt banner tint, the 72 pt avatar over it, name, 2-line headline, mutuals) with an outlined "Connect" capsule (person.badge.plus) that becomes "Pending" (clock, #666666) with a pop; the card's xmark removes it and the grid reflows with a spring.
9. Notifications: filter capsules "All" (#01754F fill, white), "Jobs", "My posts", "Mentions" (#666666 outline, 32 pt). Rows: 48 pt avatar or icon tile, 14 pt text with bold names, the time and an ellipsis at the right; unread rows on #EBF4FD with an 8 pt #0A66C2 dot. "Say congrats" (outlined #0A66C2) turns into "Congrats sent ✓" (#666666) with the toast "Message sent".
10. Jobs: capsules "Preferences", "Job tracker", "Post a job"; "Top job picks for you" (17 pt bold); rows: logo tile, title (16 pt semibold), company, place and salary (14/13 pt #666666), "Quick Apply" with a small Synergy logo, "Promoted" or "Be an early applicant" (#01754F). A row opens the job sheet: logo + company, the title (24 pt bold), "Reposted 2 days ago · Over 100 people clicked apply", chips (salary, workplace, "Full-time"), "Quick Apply" (#0A66C2 fill) and "Save", then "About the job". Quick Apply: a sheet "Apply to Lumen Labs" (Maya Chen, maya.chen@example.com, "Maya_Chen_Resume.pdf · 214 KB" ticked), "Submit application" → a bar fills in 0.4 s, a #01754F check circle draws itself (0.3 s) over "Your application was sent to Lumen Labs!" and "Done"; the job row then says "Applied · now".
11. Messaging (push): "Search messages", capsules "Focused" (#01754F fill), "Unread", "Drafts"; rows: 56 pt avatar, name, one #666666 preview line, the date. A thread has no bubbles (avatar, name + time, then the text) and a "Write a message…" bar; sending appends the message with a spring.
12. Compose (the Post tab or the pencil): a full-screen cover: xmark, Maya's 40 pt avatar + "Anyone" + chevron.down, clock and a "Post" capsule (#E8E8E8 with #9E9E9E text while empty, #0A66C2 with white once there is text); the field "Share your thoughts…" (18 pt). Post: the cover slides down with the typed text still in it (the field clears only once it's gone), a white toast (checkmark.circle.fill #01754F "Post successful." + "View post" #0A66C2, 1.6 s), and the new post springs in at the top of Home (the feed moves down by its height with a 0.35 s spring, the cell fades in), "now", zero reactions.
13. Search (push): the field focused, "Recent" rows; typing filters people and posts live.
14. Profile (push): banner-maya (120 pt), the 104 pt avatar with a 4 pt white ring over its bottom left; "Maya Chen" (24 pt bold); "Product Designer at Lumen Labs · Building apps on weekends"; "San Francisco Bay Area"; "500+ connections" (#0A66C2 semibold); "Open to" (#0A66C2 fill) and "Add section" (outlined); cards Analytics ("412 profile views", "41 search appearances"), About, Experience (Lumen Labs, Product Designer, 2022 – Present; Northwind, 2019 – 2022), Skills (Figma · 48 endorsements, SwiftUI · 21).

TRANSLATION
Services/TranslationService.swift: protocol TranslationService { func translate(_ post: Post) async -> String }. ScriptedTranslation (the only implementation now) returns the post's fixture translation after 0.4 s (0 s in HOOK MODE). Post has language ("en", "es") and translation; Language is an enum with a display name ("Spanish") used in "Translated from …". "See translation" shows when language != "en". A remix adds a language with one enum case and swaps ScriptedTranslation for another implementation in AppEnvironment.

FIXTURES (Data/Fixtures.swift)
Members (avatar file): Maya Chen (av-maya) "Product Designer at Lumen Labs"; Brad Whitaker (av-brad) "Founder & CEO at Pipeline · Keynote Speaker · 3x Founder"; Lucía Fernández (av-lucia) "Founder at Tienda Luna · Madrid"; Priya Shah (av-priya) "Staff Engineer at Northwind"; Marcus Cole (av-marcus) "Head of Growth at Brightpath · I help founders 10x their pipeline"; Sofia Reyes (av-sofia) "Talent Partner at Lumen Labs · We're hiring!"; Omar Haddad (av-omar) "Chief Vibes Officer at Snackbox"; Kenji Mori (av-kenji) "Design Lead at Fieldnote"; Ethan Brooks (av-ethan) "Enterprise Sales at Cloudnine"; Zara Okafor (av-zara) "Brand Strategist · Ex-Brightpath"; Lena Park (av-lena) "Founder at Plantwise"; Dev Malhotra (av-dev) "Product Manager at Orbit"; Jordan Lee (av-jordan) "Product Manager at Orbit"; Ava Thompson (av-ava) "Founder at Kindred"; Nikhil Rao (av-nikhil) "iOS Engineer at Northwind"; Grace Santos (av-grace) "UX Researcher at Lumen Labs"; Leo Costa (av-leo) "Design Engineer at Lumen Labs"; Hana Tran (av-hana) "VP Design at Fieldnote".
Company colours (logo tiles with a fitting white SF Symbol): Pipeline #111111, Tienda Luna #1F2A44, Northwind #0E7C66, Brightpath #F28C28, Lumen Labs #5B4BDB, Fieldnote #2B2B2B, Orbit #0B1D3A.
Home, in order (degree, time; text; media; reactions in the row's order, count, comments, reposts):
1. Brad Whitaker (2nd, 1h): "My 4-year-old spilled her apple juice at breakfast this morning.\n\nMost people would see a mess. I saw a masterclass in B2B sales.\n\nHere's what it taught me:\n1. Every spill is a pipeline opportunity.\n2. Clean up fast. Follow up faster.\n3. Always be closing (the lid).\n\nAgree?" + juice-spill. Like, Insightful, Celebrate; 2,847; 412; 96. Comments: Marcus "This is the content I'm here for 🙌", Ethan "Saving this for my next QBR", Zara "Agree.".
2. Lucía Fernández (2nd, 3h), language es: "¡Hoy Tienda Luna cumple 3 años! 🌙 Gracias a nuestro equipo y a cada cliente que confió en nosotros desde el primer día." + shop-luna. Translation: "Today Tienda Luna turns 3! 🌙 Thank you to our team and to every customer who trusted us from day one." Love, Celebrate, Like; 1,126; 84; 12.
3. Priya Shah (1st, 5h): "I'm happy to share that I'm starting a new position as Staff Engineer at Northwind! 🎉" + the new position card. Celebrate, Like, Love; 1,204; 236; 8.
4. Marcus Cole (2nd, 6h): "Unpopular opinion: hard work pays off.\n\nAgree? 👇" Like, Insightful, Funny; 3,912; 1,047; 210.
5. Sofia Reyes (1st, 8h): "We're hiring! 🚀 Lumen Labs is looking for a Senior iOS Engineer (Remote, US). Apply below or DM me." + the job attachment. Like, Celebrate; 318; 42; 19.
6. Omar Haddad (3rd+, 9h): "Thrilled to announce I've been promoted to Chief Vibes Officer at Snackbox! None of this would be possible without my amazing team. Onward and upward! 🙌" + office-cake. Celebrate, Like, Funny; 2,410; 388; 41.
7. Kenji Mori (1st, 11h): "Our team offsite in Lisbon 🇵🇹 Grateful to work with these humans." + offsite-lisbon. Like, Love; 892; 61; 4.
8. Ethan Brooks (2nd, 12h): "I closed a deal from a hospital bed last week. Here's what that taught me about commitment. 🧵" + hospital-laptop. Like, Insightful, Support; 1,733; 902; 77.
9. Zara Okafor (2nd, 1d): "Excited to share that I'm taking some time to focus on my personal brand. 🚀 Stay tuned!" Celebrate, Support, Like; 2,055; 476; 30.
10. Lena Park (1st, 1d): "Day 1 vs Day 1,000 of building Plantwise. 🌱 Never give up." + plants. Like, Love, Celebrate; 4,320; 312; 55.
Invitations: Jordan Lee (12 mutual), Ava Thompson (4), Nikhil Rao (8). People you may know: Grace Santos (21 mutual), Leo Costa (17), Hana Tran (9), Dev Malhotra (6), Ethan Brooks (3), Omar Haddad (2).
Notifications (the first four unread): "Congratulate Priya Shah on starting a new position as Staff Engineer at Northwind." + "Say congrats", 1m; "Brad Whitaker and 48 others reacted to your post: first design review of the week ☕️", 1h; "23 people viewed your profile." (eye.fill tile), 3h; "Your job alert for Product Designer: 12 new jobs" (briefcase.fill tile), 4h; "Kenji Mori commented on your post: love this!", 6h; "You appeared in 41 searches this week.", 1d.
Jobs: Senior Product Designer, Lumen Labs, San Francisco, CA (Hybrid), $165K–$210K/yr, Be an early applicant; Product Designer, Growth, Orbit, Remote, $140K–$175K/yr; Design Systems Lead, Northwind, New York, NY, $190K–$230K/yr, Promoted; UX Designer, Brightpath, Austin, TX, $120K–$150K/yr; Staff Product Designer, Fieldnote, Remote, $200K–$240K/yr, Promoted.
Messages: Priya "Thanks Maya!! Coffee next week? ☕️" (unread, 9:12 AM), Jordan "Would love to connect about the Orbit role" (Nov 7), Kenji "Lisbon was the best offsite ever" (Nov 3), Brad "Quick question about your pipeline 👀" (Oct 30).

HOOK (the video's first 3 seconds)
- HOOK MODE: tapping an invisible 24x60 pt strip at the right edge, mid-height (x 378–402, y 400–460 pt), drawn in its own window above every sheet, cover, toast and the keyboard (a tap there closes whatever is open), resets everything to this state and plays this run through the real reaction, "…more" and count code, identical every time (seconds from the tap): 0.00 Home with no animation, the feed at the very top, Brad's post first, unreacted and clamped, every image already drawn, and the touch dot pressed on Brad's "…more"; hold; 0.50 tap "…more": the text expands with the height spring; 1.60 the dot glides to Brad's Like (0.25 s) and presses at 1.85; 2.15 the picker pops open; 2.30–2.70 the dot slides right across Celebrate, Support, Love and Insightful to Funny, each lifting with its name as the dot passes; 2.85 release: Like becomes Funny with the pop, the row puts Funny first and 2,847 rolls to 2,848; 3.15 the dot fades; hold.
- Brad's whole post (header, three lines of text, photo, reactions row and action bar) must be on screen under the top bar at 0.00 and stay put through the run apart from the height spring.
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything; it scales in as it lands, shrinks to 0.9 while pressed, glides 0.25 s between points and fades after its last release.
- What the eye must see: frame 0 fully drawn (no fade-in, no blank photo); rows and heights move with springs and never jump or blink; the picker never flickers; counts roll; toasts hold ≥1.2 s; flashes ≤0.12 s at ≤35%. Waits use these times, not the app's normal delays. Every image is preloaded and decoded off the main thread at launch; warm up haptics at launch.

LOOK
Text #191919; secondary #666666; hairlines #E8E8E8; bands #F4F2EE; brand blue #0A66C2 (pressed #004182); green #01754F; unread #EBF4FD; badge #CB112D; white cards. SF Pro (14 pt body, semibold names, bold titles). Pressed states darken.

RULES
- Native SwiftUI, iOS 26 (keep the template's target), iPhone portrait.
- Deterministic fixtures. No backend, login, permissions, analytics or network calls at runtime (images are bundled; translation is scripted). No persistence: delete the SwiftData starter, no UserDefaults or files.
- Springs under 350 ms, haptics on taps, pressed states.
- Files under 300 lines, big bodies split into subviews, no long chained expressions.

REMIX-READY
Theme/Brand.swift (the name, the logo view, a Copy enum with every word), Theme/Theme.swift (colours, fonts; no colour literals elsewhere), Data/Fixtures.swift, Data/DemoScript.swift (HOOK MODE targets and timings). Codable models with String ids (Member, Company, Post with text, language, translation, media, kind, reactions and counts, Comment, Invitation, Job, AppNotification, Thread, Message) behind one AppDataSource protocol (FixtureDataSource) feeding @Observable stores (FeedStore, NetworkStore, JobsStore, InboxStore, ProfileStore, ComposeStore); views never read Fixtures. Services/TranslationService.swift as above. Components/: PostCell, ActionBar, ReactionButton, ReactionPicker, ReactionsRow, CountRoll, TranslationLink, NewPositionCard, JobCard, CompanyLogo, Toast, TouchDot. Features/<Screen>/. README.md under 80 lines: file map; how to rename, recolour, swap the logo, change the members and posts, add a post kind (a new case in Post.Kind + one view in Components); how to add a translation language and plug a real model into TranslationService (a backend route + one Swift file); 3 one-prompt remixes (Synergy for musicians finding gigs; for students finding internships; as a company directory with kudos). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.

FILMING
Long-press the Home tab icon for 1 s to reset everything to launch (reactions, translations, expansions, comments, invitations, Connects, applications, new posts, scroll, tab).

BUILD
Theme, Brand, Fixtures, then each screen in small files, a one-line status per screen; launch in the simulator every two or three files. Home with the post cell, reactions and the picker, "…more" and "See translation" first, then the post page with comments, then HOOK MODE, then compose, My Network, Notifications, Jobs with Quick Apply, Messaging, Search and Profile. Fetch synergy-brand.zip and media.zip as soon as the shell runs; check each image exists, never view them. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan.