John Siciliano
@johnsicili.bsky.social
// Creating technical content
I'm authoring this post in Sanity Studio!
October 29, 2025 at 4:04 PM
I'm authoring this post in Sanity Studio!
This post is being authored in Sanity and sent to Bluesky using Sanity Functions.
August 29, 2025 at 5:12 PM
This post is being authored in Sanity and sent to Bluesky using Sanity Functions.
Figma 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 🫰
It looks nice and lots of designers will be using it.
Add effect > glass > play with params 🫰
July 20, 2025 at 8:50 PM
Figma 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 🫰
It looks nice and lots of designers will be using it.
Add effect > glass > play with params 🫰
Just overrode the Monokai theme background and not sure why I didn’t do this 10 years ago
June 12, 2025 at 11:32 PM
Just overrode the Monokai theme background and not sure why I didn’t do this 10 years ago
DRY (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.
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.
Want to reuse an email 📧, phone number, or CMS connection data throughout your site??
Now you can with Global Data Variables!
🌎 Define reusable data globally
📦 Access the variables anywhere… including inside Slots!
👌 Maintain consistency
🫰 Easier CMS setup!
Demos below 😉
Now you can with Global Data Variables!
🌎 Define reusable data globally
📦 Access the variables anywhere… including inside Slots!
👌 Maintain consistency
🫰 Easier CMS setup!
Demos below 😉
February 28, 2025 at 10:54 PM
DRY (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.
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.
Official 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 😉
- Built with Craft
- One-click insert
- Auto-adapts to your design system on insert
- Quality > quantity
- Accessible and SEO’d
Talk soon 😉
February 15, 2025 at 2:57 AM
Official 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 😉
- Built with Craft
- One-click insert
- Auto-adapts to your design system on insert
- Quality > quantity
- Accessible and SEO’d
Talk soon 😉
A 36.55% boost in conversions… I’ll take it! 🔥
The title experiment was a success.
“Custom frontend without custom code” converts at 7.45% 🤯
The title experiment was a success.
“Custom frontend without custom code” converts at 7.45% 🤯
January 25, 2025 at 5:39 PM
A 36.55% boost in conversions… I’ll take it! 🔥
The title experiment was a success.
“Custom frontend without custom code” converts at 7.45% 🤯
The title experiment was a success.
“Custom frontend without custom code” converts at 7.45% 🤯
Just tested a new feature on Webstudio 🔥🔥🔥
Talk soon 😉
Talk soon 😉
January 22, 2025 at 6:29 PM
Just tested a new feature on Webstudio 🔥🔥🔥
Talk soon 😉
Talk soon 😉
Starting 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.
It’s been extremely challenging to ideate these, specifically balancing clarity, SEO, punchiness, target audience, and unique value proposition.
January 20, 2025 at 9:43 PM
Starting 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.
It’s been extremely challenging to ideate these, specifically balancing clarity, SEO, punchiness, target audience, and unique value proposition.
These 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.
Made entirely with Webstudio UI features. 🚫 No code was written.
Made in Webstudio without writing code
“Other platforms are stuck in 2015”…
“Other platforms are stuck in 2015”…
January 9, 2025 at 5:01 PM
These 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.
Made entirely with Webstudio UI features. 🚫 No code was written.
Every 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 👇
I’ll show you how I built it.
It involves Webstudio Resources, Cloudflare Workers, and advanced styles.
Details 👇
Check out these stats!
💻 Over 100k projects
🤝 Over 50k users
❤️ Almost 4k Discord users
🌎 Serving terabytes of data per month
Webstudio is built to scale.
💻 Over 100k projects
🤝 Over 50k users
❤️ Almost 4k Discord users
🌎 Serving terabytes of data per month
Webstudio is built to scale.
December 27, 2024 at 1:46 PM
Every 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 👇
I’ll show you how I built it.
It involves Webstudio Resources, Cloudflare Workers, and advanced styles.
Details 👇
Updating my template starter kit with these styles 🙂
December 17, 2024 at 2:00 PM
Updating my template starter kit with these styles 🙂
What 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.
I personally export the non-clipped image and on larger screens show the full image outside of the container.
December 16, 2024 at 2:16 PM
What 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.
I personally export the non-clipped image and on larger screens show the full image outside of the container.
Figma 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 CSS
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 CSS
December 13, 2024 at 3:00 PM
Figma 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 CSS
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 CSS
New AI SaaS template coming soon 🔥
December 12, 2024 at 2:30 PM
New AI SaaS template coming soon 🔥
I’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.
⌘ + 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.
December 11, 2024 at 2:26 PM
I’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.
⌘ + 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.
We 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 😅
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 😅
December 10, 2024 at 3:28 PM
We 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 😅
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 😅
Webstudio 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'}`
Example: Display "1 template" or "6 templates" dynamically with this expression:
`${total} template${+total == 1 ? '' : 's'}`
December 7, 2024 at 3:00 PM
Webstudio 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'}`
Example: Display "1 template" or "6 templates" dynamically with this expression:
`${total} template${+total == 1 ? '' : 's'}`
Woah, 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.
This makes it a lot easier to take a screenshot with the desired focal point in the middle.
December 6, 2024 at 3:06 PM
Woah, 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.
This makes it a lot easier to take a screenshot with the desired focal point in the middle.
New SaaS template coming soon to the Webstudio Marketplace.
Includes 7 pages
Includes 7 pages
December 5, 2024 at 5:00 PM
New SaaS template coming soon to the Webstudio Marketplace.
Includes 7 pages
Includes 7 pages
Figma → 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 😉
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 😉
December 4, 2024 at 2:15 PM
Figma → 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 😉
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 😉
Figma 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 :)
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 :)
November 29, 2024 at 5:30 PM
Figma 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 :)
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 :)
Updated 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
- Cards
- 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
- Cards
November 28, 2024 at 8:17 PM
Updated 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
- Cards
- 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
- Cards
Working 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😉
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😉
November 27, 2024 at 11:15 PM
Working 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😉
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😉
An official starter kit for Webstudio! I've built 5 sites with it so far and loving it.
Thanks, Webstudio community, for helping shape this!
Thanks, Webstudio community, for helping shape this!
Craft v1.0 is live — a new standard for building with Webstudio. It allows you to eliminate the learning curve when switching between Projects.
It contains:
- CSS vars
- A style guide
- Tokens
- Guidelines
Craft makes building websites fast, flexible, and reusable.
www.youtube.com/watch?v=EeLo...
It contains:
- CSS vars
- A style guide
- Tokens
- Guidelines
Craft makes building websites fast, flexible, and reusable.
www.youtube.com/watch?v=EeLo...
Craft starter kit is here. The standard for building with Webstudio.
Craft contains a set of standards, CSS variables, and Tokens that make building websites fast, maintainable, and reusable. It also enables sharing Projects without mixing different naming conventions. Craft doc: https://wstd.us/craft Build unlimited sites with Webstudio for FREE 👉 https://wstd.us/future-web
www.youtube.com
November 15, 2024 at 11:00 PM
An official starter kit for Webstudio! I've built 5 sites with it so far and loving it.
Thanks, Webstudio community, for helping shape this!
Thanks, Webstudio community, for helping shape this!