// Creating technical contenthttps://bsky.app/profile/johnsicili.bsky.socialhttps://bsky.app/profile/johnsicili.bsky.social/post/3m4dt6cjxg52xI'm authoring this post in Sanity Studio!29 Oct 2025 16:04 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3m4dt6cjxg52xhttps://bsky.app/profile/johnsicili.bsky.social/post/3lxkkjvhd5u2mThis post is being authored in Sanity and sent to Bluesky using Sanity Functions.29 Aug 2025 17:12 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lxkkjvhd5u2mhttps://bsky.app/profile/johnsicili.bsky.social/post/3luge2e7gk22sFigma just made adding a glass effect super easy. It looks nice and lots of designers will be using it. Add effect > glass > play with params 🫰20 Jul 2025 20:49 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3luge2e7gk22shttps://bsky.app/profile/johnsicili.bsky.social/post/3lrh3f2h4z226Just overrode the Monokai theme background and not sure why I didn’t do this 10 years ago12 Jun 2025 23:31 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lrh3f2h4z226https://bsky.app/profile/johnsicili.bsky.social/post/3ljbirkv5kc26DRY (don’t repeat yourself) is a core development principle. Hardcode an email in 3 places on a site, and human error will strike if you need to update it. Plus, it just takes more work. Now you can define reusable data on the Global Root. Think phone numbers, emails, CMS API info, etc. [contains quote post or other embedded content]28 Feb 2025 22:54 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3ljbirkv5kc26https://bsky.app/profile/johnsicili.bsky.social/post/3li6pt35t5s26Official Webstudio sections library coming soon! - Built with Craft - One-click insert - Auto-adapts to your design system on insert - Quality > quantity - Accessible and SEO’d Talk soon 😉15 Feb 2025 02:57 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3li6pt35t5s26https://bsky.app/profile/johnsicili.bsky.social/post/3lglhebogse2dA 36.55% boost in conversions… I’ll take it! 🔥 The title experiment was a success. “Custom frontend without custom code” converts at 7.45% 🤯25 Jan 2025 17:39 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lglhebogse2dhttps://bsky.app/profile/johnsicili.bsky.social/post/3lgdyr4gwkq2jJust tested a new feature on Webstudio 🔥🔥🔥 Talk soon 😉22 Jan 2025 18:29 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lgdyr4gwkq2jhttps://bsky.app/profile/johnsicili.bsky.social/post/3lg7cmvjste2vStarting an A/B test for our homepage title. It’s been extremely challenging to ideate these, specifically balancing clarity, SEO, punchiness, target audience, and unique value proposition.20 Jan 2025 21:43 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lg7cmvjste2vhttps://bsky.app/profile/johnsicili.bsky.social/post/3lfd5qh7tj22bThese CSS interactions were fun to make and strengthened the marketing messages, making them more impactful than static ones. Made entirely with Webstudio UI features. 🚫 No code was written. [contains quote post or other embedded content]09 Jan 2025 17:01 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lfd5qh7tj22bhttps://bsky.app/profile/johnsicili.bsky.social/post/3lec4sq5gbs2nEvery SaaS website needs this live stats section. I’ll show you how I built it. It involves Webstudio Resources, Cloudflare Workers, and advanced styles. Details 👇 [contains quote post or other embedded content]27 Dec 2024 13:46 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lec4sq5gbs2nhttps://bsky.app/profile/johnsicili.bsky.social/post/3ldiyw7ltgj2oUpdating my template starter kit with these styles 🙂17 Dec 2024 14:00 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3ldiyw7ltgj2ohttps://bsky.app/profile/johnsicili.bsky.social/post/3ldgjdk22dv2iWhat do you do when implementing a Figma design that has images that go to the edge of the design and then are cut off? How should this be handled on larger screens? I personally export the non-clipped image and on larger screens show the full image outside of the container.16 Dec 2024 14:16 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3ldgjdk22dv2ihttps://bsky.app/profile/johnsicili.bsky.social/post/3ld72fw43aa2cFigma to WS update: Color vars! 1 Feed it CSS from Figma 2 Suggest the Open Props color groups 3 AI maps colors to palette variables (—gray-12) 4 Human intervention lets you customize the mappings 5 AI maps the color vars to semantic vars by interpreting their usage from the CSS13 Dec 2024 15:00 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3ld72fw43aa2chttps://bsky.app/profile/johnsicili.bsky.social/post/3ld4ibxtxio2oNew AI SaaS template coming soon 🔥12 Dec 2024 14:30 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3ld4ibxtxio2ohttps://bsky.app/profile/johnsicili.bsky.social/post/3lczxknx5ze2oI’m using Preview mode 5x more with the new shortcut… ⌘ + Shift + D All with the left hand. This shortcut is for toggling to Design mode, but if you’re already in it, it’ll take you to Preview.11 Dec 2024 14:26 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lczxknx5ze2ohttps://bsky.app/profile/johnsicili.bsky.social/post/3lcxklrk3cc27We just announced a huge feature with AI Santa. Took one minute and we scrapped our previous launch idea that took over a day and didn’t turn out great. Thanks for the assist @synthesia.io 😅 [contains quote post or other embedded content]10 Dec 2024 15:28 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lcxklrk3cc27https://bsky.app/profile/johnsicili.bsky.social/post/3lcpxlv2nhc23Webstudio Tip: Use the Expression Editor for conditional plural formatting. Example: Display "1 template" or "6 templates" dynamically with this expression: `${total} template${+total == 1 ? '' : 's'}`07 Dec 2024 15:00 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lcpxlv2nhc23https://bsky.app/profile/johnsicili.bsky.social/post/3lcnhhm5t632gWoah, I just learned that if you hold option while taking a screenshot, it grows outwards from the center point. This makes it a lot easier to take a screenshot with the desired focal point in the middle.06 Dec 2024 15:06 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lcnhhm5t632ghttps://bsky.app/profile/johnsicili.bsky.social/post/3lcl5esvjcf2lNew SaaS template coming soon to the Webstudio Marketplace. Includes 7 pages05 Dec 2024 17:00 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lcl5esvjcf2lhttps://bsky.app/profile/johnsicili.bsky.social/post/3lcidpiacjq2kFigma → Webstudio update: Added support for Local Styles! Including: - Grid template columns based on what it sees - Flex with direction and Craft gap vars - Background colors (on `section`) Also added a CLI and some other helpful tasks 😉04 Dec 2024 14:15 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lcidpiacjq2khttps://bsky.app/profile/johnsicili.bsky.social/post/3lc44a6czbu2kFigma to Webstudio update: Now using OpenAI API in the local script to convert the image to HTML. Then the usual code converts the HTML to Webstudio AST and copies it to the clipboard. Note: I trimmed the video, the API takes longer than that :)29 Nov 2024 17:29 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lc44a6czbu2khttps://bsky.app/profile/johnsicili.bsky.social/post/3lbzv4edihh2xUpdated Figma to Webstudio with improved process: - ChatGPT for screenshot to HTML with attributes. - Custom script for HTML to Webstudio AST. ChatGPT is very reliable for the HTML but too inconsistent with the AST. Also added support for: - Alt text - Grid columns - Cards28 Nov 2024 20:17 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lbzv4edihh2xhttps://bsky.app/profile/johnsicili.bsky.social/post/3lbxolsmygo2oWorking on a Figma to Webstudio ChatGPT prompt. It outputs Craft-compliant* Webstudio AST (format for pasting) It adds: - Components - Existing Tokens (section, container, grid, headings, buttons) - Renames instance labels - Sets box tag like h2 or section *most of the time😉27 Nov 2024 23:15 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lbxolsmygo2ohttps://bsky.app/profile/johnsicili.bsky.social/post/3lazi776p2m26An official starter kit for Webstudio! I've built 5 sites with it so far and loving it. Thanks, Webstudio community, for helping shape this! [contains quote post or other embedded content]15 Nov 2024 23:00 +0000at://did:plc:fld6cwgetdu4e2nsx4jtphif/app.bsky.feed.post/3lazi776p2m26